Floating Property

Posted on by tchastkavich

Shape of the Day:

  • Complete Broken Winter Assignment
  • Floating property in CSS
  • Broken Floats Assignment

Website of the Day:

http://www.pixelthoughts.co/ – JavaScript is used here to calm you down

1. Complete Broken Winter Assignment before exploring the next topic

  • Ensure to hand in your Broken Winter Assignment in your shared folder for Mr. Chastkavich to mark it.

2. Float Property

  • Positioning properties are limited to where content goes on a page, but we can have content respond to each other using the float property. This will allow content to flow around it.
  • Go through the examples here: https://www.w3schools.com/css/css_float.asp
  • To practice with floating, set up a new page in Visual Studio and name the file “floats-practice.html” with opening and closing tags for html, head, title, style and body.
  • We’re going to attempt to set up a 2-column page with a header and a footer. It should adjust itself when we shrink the browser window.
  • Set up some div areas in the style sheet for a wrapper. Be sure to include header, left, right, and footer sections. Properties will be added soon.
  • Now add the respective div tags for each in the body section of your webpage. Add paragraph tags in all the sections and label them as header, left, right, and footer. Grab two paragraphs from here and add them to the left and right sections in the body tag.
  • Give the wrapper a width and height of 100%, a background colour of #C5CAE9, top and bottom margins of 0px, left and right margins of auto, and 5 px padding in all directions.
  • Give the header a width of 100%, margins of 0px, and a background colour of green. In the paragraph tag of the header section, add “Floating in CSS” as your header. Change the font size in this section to 30px.
  • Next, float the left section to the left using float: left then add padding  with 3px, a yellow background and a width of 60%.
  • Now add float: right to the to the right section, along with padding of 3px, a lightblue background colour, and a width of 30%.
  • Decide how wide the footer should be, as well as the margins. Give it the background colour lightcoral and put “Made by YOURNAME” in your paragraph tag. Is something happening to the footer? Try this to fix the footer issue.
  • Download and add this image to the left section (remember the photo must be in the same folder as your html file!!). How can you get the image to the left or right of the paragraph? How do you give it some “breathing room” so it’s not against the text? The image is also quite large, let’s make it smaller by creating a class .raven in our style tag, then use this code when you add your image tag:
<img src="FILENAME" class="raven">
  • Remember: CSS floats are not being used as much for webpage layouts anymore due to more mobile-friendly layouts. Flexbox and grid are what is being used to create them. Floating content can be removed from its parent container, thus the clearfix hack is generally used to address this issue.
  • How your end result should look like:

3. Broken Floats

  • Download the broken code here and follow the comments.
  • After you finished what were the two descendant selectors that you used in the code? What did they do and why did you use them? Answer this somewhere on your Broken Floats webpage.