Question

I’m trying to create the following layout for my website:

<table width="80%" align="center">
    <tr>
        <td width="80%" bgcolor="red">MAIN CONTENT</td>
        <td bgcolor="green">SIDEBAR</td>
    </tr>       
</table>

As you would imagine this will create a table that is 80% of the page width and the content area is 80% of that width, while the sidebar fills the rest.

But this time I want to use DIVs or SPANs or basically a TABLEless design. Now, I know I can use two DIVs and use their “float” properties to achieve this but I was hoping to see if there is something more simple and more logical like this:

<div align="center" style="width:80%">
    <span style="width:80%;">
        MAIN CONTENT
    </span>
    <span>
        SIDEBAR
    </span>
</div>

Unfortunately the above does not work at all and I don’t know why. Can someone please show me the purest HTML implementation for it which does not use “float”?

Every site I see on the internet nowadays has at least one sidebar so I’m hoping your answer to this will help a lot of people besides me. Thanks!

Answer 1

You can do this without using floats by using proper markup and display: table;, display: table-cell; with CSS.

HTML:

<div id="wrap">
      <div id="sidebar">
        I am a sidebar!
      </div>
      <div id="mainContent">
        I am some main content
    </div>
</div>

CSS:

#wrap
{
    width: 100%;
    height: 400px;
    display: table;
}

#sidebar
{
    display: table-cell;
    border: 1px dashed #f00;
}

#mainContent
{
    display: table-cell;
    width: 80%;
    border: 1px dashed #0f0;
}

But beware, IE7 and lower do not support this CSS.

http://jsfiddle.net/57Fvk/

---

Using almost the same markup (one extra div) you can use floats to create the desired layout also:

HTML

<div id="wrap">
      <div id="sidebar">
        I am a sidebar!
      </div>
      <div id="mainContent">
        I am some main content
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS:

#wrap
{
    width: 100%;
    height: 400px;
}

#sidebar
{
    width: 20%;
    float: left;
    background: #f00;
    height: 100%;
}

#mainContent
{
    width: 80%;
    float: left;
    background: #0f0;
    height: 100%;
}

.clear
{
    clear: both;
}

http://jsfiddle.net/shzLc/