CSS Template Tutorial – Column floating

CSS Template Tutorial – Column floating

This is going to be a short part of the tutorial. In this part I will basically set up the left and right columns so they are ready to add the content to. This is the basic structuring of our template. First thing you will need to note is the gradient underneath the navigation on the design. This will have to be added as a background for a content div.

Slice content background

Like always go into image ready and slice the top gradient underneath the navigation as such:

Most designs have gradients underneath the navigation and above the content or as a background for the content. In those cases make the slice 1px wide. In this case I also have a pattern. Therefore to make it flow it has to be a reasonable width as describe in previous parts of the tutorial.

CSS coding for columns and content

The idea is we we have a div called content which will hold both columns. It should be the full width of the wrapper div. Since the columns will be floated inside the content div we will need a clearing div after the columns but before the ending tag of the content div (clearing divs are explained in previous part). To work out the widths for the columns use the technique of slicing images on the design. This isn’t going to work for the example since the width of the design in the psd is not 800px.

We should therefore have the following CSS coding:

 .content{
width:800px;
background:url(images/undernav_22.gif) repeat-x top;
}
.leftcolumn{
float:left;
width:500px;
padding:20px;
}
.rightcolumn{
width:220px;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
float:right;
}

To me that coding seems pretty logical, yeah? Basically the content holds the two columns. One is wide and floated on the left side with padding so the text inside it won’t go right to the edges and the other is think and floated to the right (will hold further navigations and links). There is also a gap between the two columns so the are not too close and cluttered looking. To do that simply make sure the widths of the two columns (including paddings) is less that 800px. It just takes some experimenting to get the right looking dimensions. I tend to guess then change them instead of calculating it properly.

The XHTML code used is:

<div class="content">
  <div class="leftcolumn"></div>
  <div class="rightcolumn"></div>
  ><div class="clear"></div>
</div>  

You should already know how XHTML works by now but if you didn’t I have highlighted which closing tags go with which opening tags. It may make it easier to understand. Put this coding section after the closing tag for the nav. If the XHTML worked any differently ie the first red closing div closed the content div you would end up with overlapping element and it just wouldn’t work.

If you go to the design mode on dreamweaver you should now have something like the following:

We have the basic shell which we will add the content to. We may find that we will change the width of the columns later and add some extra CSS but this will do for now.

Step 6- Coding the content

Related CSS Tutorials

Comments