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.
Answered By – AtHeartEngineer
Answer Checked By – Senaida (AngularFixing Volunteer)