Some 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.





