Question

Previously, I was using <table> to split up my page layout into 3 parts, the left sidebar, right sidebar & the main centre panel. Now, after having learnt the disadvantages of overusing/misusing <table>, I want to avoid using tables for this purpose & I am looking to style these 3 divs in such a way that they look like 3 columns of a <table> row.

Any inputs on how I can achieve the 3 divs in same row, would be highly appreciated.

Currently my all the three div s are shown in linearized fashion, one after another.

Answer 1

Maybe something easier, what about:

HTML:

<div id="main">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

CSS:

#main{
    margin: 0 auto 0 auto;
    width: 960px; /*just an example*/
}
#main div{
    float: left;
    width: 320px; /* a third of the main width*/
}

I hope this will help you.