Basic html layout 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 wit开发者_如何学Gohout using a table and without predefined/hardcoded values for margins.

Is that possible?

Thanks in advance

Mike

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/

You can build any table-like structure using divs and display:table,display:table-row,display:table-cell and you won't be abusing table semantics in markup. It really depends if you need to support IE7 as I think these CSS properties were only introduced to IE8 (years after everyone else had them).

If that's going to be a problem then just look around for options with flexibility to do what you need. I can't really think why hardcoded margins would even be an issue so perhaps you need to explain what you are attempting in more detail.