07. The “float” property

Okay, time for another big change. As it stands, all our page sections are just sitting underneath each other, this is obviously not the layout we’re looking for in the long term. So what we’re going to do is “float” the navigation menu to the left and “float” the content to the right so that your page looks more like this:

In order to achieve this effect let’s start with the “nav” selector. We want this whole thing to float to the left so change your rule for “nav” so it looks more like this:

nav {
   float            : left;
   width            : 350px;
   background-color : #f5d0a9;

You obviously don’t have to change your background colour if you’re happy with yours, the important thing is to add a “float” and “width” property.

The “float” property is fairly self-explanatory really, we just want the whole nav block to sit to the left and the “width” property is just how wide “nav” is going to be. Remember the total width of our container is 950 pixels and so I reckon 350px looks about right for now.

As a consequence of shifting “nav“, the main content area needs to sit to the right and this should clarify why we’ve incorporated the “section” tag. Remember that we talked back here about the idea of a “wrapping” tag? Well this shows exactly why that is useful. I now move everything within “section” to the right by putting the following rule in:

section {
   float            : right;
   width            : 600px;
   background-color : #f3e2a9;

And voila! We now have “nav” on the left taking up 350 pixels and “section” on the right taking up the remaining 600 pixels…simple!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>