Converting to CSS: Positioning

Now that we have prepared our text and put styling in an external file, we only need to structure our content on a webpage (right now the content is in a single column).

HTML code

Here is what we have for now:

<div class="logo">
Company name
</div>
<ul class="topnav">
<li>Home</li>
<li>Services</li>
<li>About</li>
</ul>
<div class="content">
<h1>Page heading</h1>
<p>Some paragraph text here</p>
<p>..more content..</p>
</div>
<ul class="leftnav">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
<div class="footer">
Copyright © 2006
</div>

So, let's finish our work.

Initially, we had a site on tables. It had a certain layout, where page content was positioned in different part of the browser window. As you are redesigning a site, most likely, the visual layout may be the same with your old site. For the sake of simplicity, let's pretend that our example consists of a heading, a top navigation, the left navigation, the main content area and a footer.

CSS code

In this example, we only need to position the left navigation to the left of the screen, with the content area on the right of the left navigation, because the top navigation and the footer are not included in the wrapping <div class="container">.To do this, we'll use floats. Here is what we add to the CSS file:

body {margin:0;padding:0;}

.topnav li {float:left;width:15%;list-style:none;}
.topnav {margin:0 0 0 10em;}

.container {padding-left:10em; min-width:11em;}
.content, .leftnav {position:relative; float:left;}
.content {width:100%;}

.leftnav {width:10em;margin-left:-100%;right:10em;}
.leftnav li {list-style-type:none;}

.footer:before, .topnav:after {clear:both;content:'';
        visibility:hidden;display:block;}
.footer {text-align:center;}

/*IE hacks*/
.content {display:inline;}

CSS code description

Read the description of the CSS code above, below:

• firstly, to remove any margins and paddings, generously provided by our browsers, we set them to zero
• secondly, we style the top navigation: line the sections with 'float:left', remove list styling and set a fixed width. To move the nav to the right, we set a left margin, equal to the width of the left column.
• thirdly, we add a container around the content and the left navigation areas - it will help us position the blocks. We position the blocks relatively to the enclosing block (container) and float them to the left for them to line up on one level. We also set the width of the content area to 100%.
• then, we format the left navigation: setting the width to 10em, move it left by 100% to position it left from the content and move it further left by its width, 10em. That is, we moved the left nav by 100% and 10em left, right where it belongs.
• after that, we need to let the footer go below the content area. For that, we create some content before the footer, make it invisible and clear the content from both sides. This is also done for the top navitation, but we place the content below the nav
• afterwards, we format the footer: here we just place the footer text in the center
• after we have created a standards-compliant example, we add hacks. Right now, IE will have problem with our content and left nav areas. To fix the double margin bug, we make the content display as inline.

After you have created a bare skeleton for your site (see example), you can style it up by adding borders, adding colors to links (active, hover, visited states), etc.

If you want to try another technique for creating liquid layouts, you can try a "One True Layout" from PositionIsEverything.

Note: the demonstrated model was insighted by "The One True Layout". The example works (was tested, that is) in IE 6.0, Firefox 1.5 and Opera 8.51. Supposedly, it works in all other browsers (it is not confirmed, though). It has only one IE hack, aimed to remove the box model IE bug and another bug (the author of this tutorial has forgotten about), so it should be deemed as relatively 'hack-free' example.

Learn more:

• Read the benefits of our services
• Redesign your site
• Improve your site usability
• Digg this tutorial