Home/ Questions/Q 1040611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T15:14:44+00:00

I’m posting this because I am going crazy. I have a page where the

  • 0

I’m posting this because I am going crazy.

I have a page where the content is centered in the page and must span from top to bottom no matter the content, with two columns.

So I have a content div with a left child div and a right child div. The code is the following:

<html>
<head>
  <style type="text/css">
    html, body {
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
    }

    .main {
      min-height: 100%;
      margin: auto;
      width: 400px;
      background-color: red;
    }

    .left {
      width: 100px;
      padding: 0px;
      height: 100%;
      float: left;
      background-color: blue;
    }

    .right {
      width: 300px;
      height: 100%;
      padding: 0px;
      float: right;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  </body>
</html>

This works fine and the div spans to the bottom. I see two columns green and blue. The problem is that this does not work if the content in the divs (left or right) is larger then the browser window. Add a lot of content to the left or right div and you should see what I’m talking about, something like:

<div class="main">
  <div class="left">
    Left<br>
    Left<br>
    Left<br>
    Left<br>
    .... <!-- lots of these -->
  </div>
  <div class="right">
    Right<br>
    Right<br>
    Right<br>
    .... <!-- lots of these -->
  </div>
</div>

My question is, why is this happening (I have set html, body { height: 100%; }) and how can I fix it?

I am going crazy. Please help me!

Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks to meder who pointed me on the right track, I finally managed to make it run consistently in IE, Mozilla and Chrome. Here is the complete code, hope it helps someone else too:

    <html>
<head>
<style type="text/css">
html,body {
    margin: 0px 0px 0px 0px;
    height: 100%;
    text-align: center;
}

.main:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    background-color: red;
    width: 400px;
    min-height: 100%;
    margin: auto;
   text-align: left;
}

.left {
    width: 100px;
    padding: 0px;
    float: left;
    min-height: 100%;
    background-color: blue;
}

.right {
    width: 300px;
    min-height: 100%;
    padding: 0px;
    float: right;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div class="right">Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
</div>
</div>
</body>
</html>
    • 0