Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials CSS Layout
Your Ad Here

CSS Layout


CSS LayoutSome of you, while very intrusively looking at other people's sources might think "wow, they don't use tables!"

Wow, you're correct.. the way they achieve this is by using the good old CSS <div> trick. Infact, it's so old it's not even new.. at the moment they're quite popular. However:

1. Forget photoshop layouts and slicing, unless you're willing to spend decades of your life putting each image into a different <div> tag, which is kinda useless. But if you want to go that way, try:

<div style="display: table-cell;"></div>

Now with that said, see you in ten years.

Your CSS code

In your CSS file, type this:

#wrapper {
display: block;
padding: 3px;
}
#wrapper .left {
float: left;
width: 18%;
border: 1px solid black;
}
#wrapper .centre {
width: 60%;
border: 1px solid black;
}
#wrapper .right {
float: right;
width: 18%;
border: 1px solid black;
}

And on a blank page somewhere, try this:

<div id="wrapper">
<div class="left">Left column</div>
<div class="centre">Centre column</div>
<div class="right">Right column</div>
</div>

You should now have a page with 3 columns with no tables! If you want to see a more detailed example, why not head over to www.xyrus-designs.uni.cc and view the source. 100% no tables for layouts whatsoever!

If you have any questions, feel free to PM me or ask in the forum or tagger.



Author's URL: Will
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "CSS Layout"

Only registered users can write comment

Reader's comments
comments jericsmith July 09, 2007 says:
CSS Layout
Also, the floating columns should be defined consecutively as:

Code:

left column

Right column

Centre column


comments jericsmith July 09, 2007 says:
CSS Layout
The sarcasm would have had a far greater effect if the code worked. In the latest versions of both Firefox and IE, the right column hangs below and the left border doesn't connect. The intended solution requires:

#wrapper {
display: block;
padding: 3px;
}
#wrapper .left {
float: left;
width:18%;
border: 1px solid black;
}
#wrapper .centre {
border: 1px solid black;
}
#wrapper .right {
float: right;
width:18%;
border: 1px solid black;
}