Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
CSS List Menus and Buttons
by GreyCobra.com
Creating Your First CSS Website
by GreyCobra.com
Advantages of Tableless CSS Layouts
by TutorialStream.com
Introduction to the Fundamentals of Dreamweaver
by Vecpix.com
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
HTML and CSS  Home HTML and CSS Tutorials CSS Layout
rss

CSS Layout

Author: Will More by this author

Added: Mar 28, 2007 Rating:  Average Rating: 3.09 Votes: 107 Position: 7092 of 12257Average Rating: 3.09 Votes: 107 Position: 7092 of 12257Average Rating: 3.09 Votes: 107 Position: 7092 of 12257Average Rating: 3.09 Votes: 107 Position: 7092 of 12257Average Rating: 3.09 Votes: 107 Position: 7092 of 12257 Level: Beginner Software:  Dreamweaver

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: www.avengex.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Read/Add comments to "CSS Layout"

Reader's comments
comments  jericsmith July 09, 2007 says:
CSS Layout
Also, the floating columns should be defined consecutively as:
:
   <div id="wrapper">       <div class="left">left column</div>       <div class="right">Right column</div>       <div class="centre">Centre column</div>          </div>
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; }