Question

I’m on Win XP but this problem occurs on Firefox, IE, and Google Chrome. I want to align two DIVs on the same horizontal plane. I want the div on the left to occupy 24% of the screen and the div on the right to occupy the rest. Everything looks fine when my browser is maximized, but when I click the resize button to make the window smaller, the two DIVs are no longer on the same plane. The top of the right DIV appears beneath the bottom edge of the left DIV (the left boundary of the right DIV is still correctly aligned just after the right boundary of the left div).

How can I make both DIVs appear on the same horizontal plane, even when the window is not maximized? Here is the HTML I’m using …

<div class="header">
    <img src="logo.gif"/>
</div>

<div class="container">
    <div id="contents">
        <div class="categoryPanel"></div>
        <div class="productDetailsPanel"></div>     
    </div>
</div>

and here is the CSS …

.header {
width: 100%;
height: 63px;
background-color: #333366;
}

.container {
width: 100%;
}

.categoryPanel {
height: 600px;
width: 24%;
float: left;
margin: 10px 5px 0px 0px;
background-color: green;
}

.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: right;
margin: 10px 10px 0 5px;
}

Thanks, – Dave

Answer 1

On .productDetailsPanel, remove float: right and add overflow: hidden, job done; it’s exactly what you asked for.

http://jsfiddle.net/thirtydot/KjZ8Q/

The reason overflow: hidden helps in this case is not obvious, read this.