Web Basic 101 – CSS: Float

It’s now time to dig a little further into CSS and start creating a basic, but complexe, HTML template with float element. By the end of this course, you will be able to create a web page with a header, menu, footer and content!

In order to archive this goal, we will need to build a HTML template reflecting this image:

In the previous course, we saw how to use div tags to created box on which we can assign a CSS style, so I will not jump too much into the details, and I will created a HTML structure that will correspond to the previous image.

The HTML Layout

<div id="header">
  <h1>MyTitle</h1>
</div>
<div id="wrapper">
  <div id="menu">
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
    </ul>
  </div>
 <div id="content">
   <h2>Article Title</h2>
   <p>My blog!</p>
   <p>Bla Bla</p>
  </div>
</div>
<div id="footer">
  <p><a href="contact.html">Contact-me!</a><p>
</div>

Adding Some Colors

We now have a bit of HTML that we will be able to transform into a two column layout. The above layout will actually give us a weird display on screen without CSS.

#header {
  background-color :#ffc90e;
}
#wrapper {
  background-color :#b5e61d;
}
#menu {
  background-color :#99d9ea;
}
#content {
  background-color :#c3c3c3;
}
#footer {
  background-color :#7092be;
}

Next step will be to place our two columns, by default, each element of a HTML document will flow one after the other, in order to break this flow we will need to set the float property of an element to either right or left. The float property will remove the object from the regular flow of a document and will place it on either the right or left side of the screen. If we set the width of a float element we can created perfect column. Here is the CSS code for our two column layout:

Float Layout

#menu {
  background-color :#99d9ea;
  float:left;
  width:20%
}
#content {
  background-color :#c3c3c3;
  float:right;
  width:80%
}

We are almost done; the only problem left is the footer. Since we’ve removed two elements from the regular flow of the document, the footer will not be at the bottom of the document. In order to archive this, we will need clear the floating element by using the clear property! You can either clear the left, right or both floating element. Since we want the footer to be at the complete bottom, we will clear both floating element like so:

#footer {
  background-color :#7092be;
  clear:both;
}

That’s it! Now we have a two column layout with the footer and header. Next week we will created a basic design on which we will try to improve on a regular basis.

Here is the video version our this course: