Home/ Questions/Q 7514761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:36:00+00:00

I’m making a website for a friend who gave me a reference to another

  • 0

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).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0