Three column layout, without tables
Pages need to contain more and more data and screenresolutins become bigger and bigger, giving the space, webpages need. As a result a lot of websites with a three column layout are showing up (well, actually they exist for a long time already, but they show up more). Here is a way to create those layouts, without tables.
First the HTML:
<body>
<div id="wrapper">
<div id="head"></div>
<div id="content">
<div id="floatcols">
<div id="maincontent">
<p>Some content</p>
</div>
<div id="sideleft">
<p>Left column</p>
</div>
</div>
<div id="sideright">
<p>Right column</p>
</div>
<p id="foot" >Footer</p>
</div>
</div>
</body>
Maybe a little word of explaination is required.
First we have a wrapper div, which will allow us to center the layout if needed, followed by a head div where our header info goes. Now, this can easily be a paragraph if you like only want to display an image and 1 line of text. If however, you would like a menu there or whatever is more than just a small header, a <div> is recommended.
Following the head is a content <div> that contains 2 more divs. A floatcols and a sideright <div> containing the maincontent and sideleft divs and the right column respectively.
Finally a foot paragraph which ends the page’s content.
Pages: 1 2
Three columns layout without table | Libin Pan posted this response on February 8th, 2008 at 8:12 am
[...] Three column layout, without tables [...]