Question

I have a problem. I have (simplified) this code:

<div class="page">
  <div class="leftcolumn">content</div>
  <div class="midcolumn">some text
      <div class="midcolumn content">more text</div></div>
   <div class="rightcolumn">a nice widget, or so</div>
</div>

left, mid and right column are just floated and have apdative (=%) widths, and that works fine. Unfortunately, the height of the three columns are right, they are just the height of the content that’s in them. Unfortunately, the div page gets a height of 1px, even while columns in it are way bigger. How do I get the page div to get the same height of the columns. For example, if the largest of the three columns has a height of 1000px, I want the div page to get a height of 1000px. Can anyone tell me how I should do that?

Answer 1

Add overflow:auto to your page div.