Pure HTML: How to create this layout without using "float"? - css

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"> </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/

Answer 2

Here's a very simple way to create this layout:
http://jsfiddle.net/e94zc/
HTML:
<div id="page">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS:
#page{
margin: 0 auto;
width:80%;
position: relative;
}
#content{
width:80%;
position: absolute;
top: 0;
}
#sidebar{
position: absolute;
top: 0;
left: 80%;
width: 20%;
}