Div with overflow:auto disappears

Question

I have a wrapper div with a height of 600px and a width of 900px

Inside it there are 2 divs

The first is floated left with the below style

#left{
height : 100%;
width : 600px;
overflow:hidden;
float : left;
}

The second one is not floated, so that it can occupy the rest of the space and the style is

#right{
height : 100%;
overflow : auto;
margin-left : 600px;
}

The above design is meant to create a 2 column layout with a fixed height. The html I used is

<div class="wrapper">
  <div id="left">
    <img id="main-image" src="/some/image"/>
  </div>
  <div id="right"></div>
  <br clear="left"/>
</div>

The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div.

When I remove the overflow:auto, however they do.

I cannot figure out why. Any help appreciated

Thanks

Answer 1

You probably don't want your margin left to be equal to your left column just because it's floated. That's usually a trick we use when it's absolutely positioned, not floated. Try that and it might just clear up.

What you have is most likely the right-hand div being pushed down out of view by its content plus margin. With overflow:auto it might be that scrollbars are being introduced and that triggers some additional resizing...don't know without more markup and CSS to look at. Best of luck!