CODEWITHSUNDEEP
htmlcsslayout
mixkat
mixkat

Reputation: 3785

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 without using a table and without predefined/hardcoded values for margins.

Is that possible?

Thanks in advance

Mike

Upvotes: 1

Views: 124

Answers (2)

SpliFF
SpliFF

Reputation: 38956

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.

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58521

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/

Upvotes: 3

Related Questions