I'm making a website for a friend who gave me a reference to another site the layout of which he liked, and asked me if I could "make his similar to that one".
The reference site is probably 10 years old and done with 5-levels-deep nested tables so I decided to use CSS like a good web developer.
The problem is that he wants a two-column layout with a header, but one in which one column overlaps the header and one doesn't. I laid the site out like this:
<html style="min-height: 100%">
<head>...</head>
<body style="min-height: 100%">
<div id="left" style="height: 100% !important">
...stuff...
</div>
<div id="header">
...stuff...
</div>
<div id="right" style="height: 100% !important">
...stuff...
</div>
</body></html>
Everything uses relative positioning and percentage or auto height/width. Now the main problem is that both #left and #right, just as expected, have a height that is 100% of the page. The problem is that the #right div is pushed down bu the #header div that's right on top of it, so there's some extra room at the bottom of the page that is occupied only by the #right div.
Is there a way around this? I've considered changing the style of #header to have a percentage height and subtracting that from the height of #right, but that seems kludgy to me (on top of which it'll probably break IE).
First off, I don't suggest using min-height:100% for anything. Just use height:100%. min-height is supposed to be used mainly for a pixel or em value. using % with min-height defeats the purpose, you can't have a minimum height equal to a percentage of your screen.
I would use the 1140 grid system. It's easy to use, very flexible, and can make your layout easy and quick to design.
Using the 1140 grid system try this:
<div class="container">
<div class="row">
<div class="twelvecol">
<p>Header area!!!!</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sixcol">
<p>left column</p>
</div>
<div class="sixcol last">
<p>right column</p>
</div>
</div>
</div>
There you go, problem solved.