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

One Response to “Three column layout, without tables”.

  1. […] Three column layout, without tables […]

Comments are closed.