Question

I’m trying to build a page which will have a box-like layout..A top banner a bottom banner,two navigation panels(left and right) and some text that will appear in the middle.

Now I’m wondering if you can create something like that without using a table and without predefined/hardcoded values for margins.

Is that possible?

Thanks in advance

Mike

Answer 1

You can achieve centrally elastic three column layout with header and footer like this if that is what you mean?

With html:

<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="bottom"></div>

And css:

#top,#bottom{
  width:100%;
  height:70px;
  background:silver;
  clear:both;
}
#middle{
  background:green;
}
#middle,#left,#right{
  height: 200px;
}
#left,#right{
  width: 200px;
  background:skyblue;
}
#left{
  float:left;
}
#right{
  float:right;
}

Fiddle: http://jsfiddle.net/hkrVz/