x

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:

slice guide

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:

css columns

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

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

    Read
  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

    Read
  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.

    Read

Comments

  1. Bill Armstrong says:

    Hi, I am very new to CSS code. I did some HTML a few years ago and wanting to start a new site. I am ready to start experimenting with the code. What actual software are you using to edit and test the examples above? Thanks Alot, Bill

  2. Luke says:

    He is using adobe dreamweaver, probably cs3.

  3. John says:

    Very nice detailed explanation of floats. Floating can be the single most useful tool in css, and its wise to use it when other options aren’t available.

  4. john says:

    hello thx for the guide..
    when exactly we have to put padding or margin ? what the diffrent exaclty

    this two things make me conduse

    thx pls send me email or replay

    regards

  5. valentine says:

    To edit css you dont needdreamweaver or any program you can do it with the notepad on the pc and save it as a .css file.

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books