CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 19320

Trouble aligning DIVs on horizontal plane

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

Upvotes: 2

Views: 329

Answers (4)

thirtydot
thirtydot

Reputation: 228302

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.

Upvotes: 1

xphantom
xphantom

Reputation: 13

This could work (float: left):

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

Upvotes: 0

Robert
Robert

Reputation: 3074

In order for it to take up the entire space you would need to either fill it with something or provide a width. I've create a jsfiddle to show the results. Essentially I modified the .productsDetailsPanel by adding a width: 75%; removing the float:right; and modifying your margin: 10px 0 0 0;

Here is the new css for .productsDetailsPanel

.productDetailsPanel {
height: 600px;
width: 75%;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 0px 0 0px;
float: left;
background-color: red;
}

http://jsfiddle.net/rhoenig/qXvag/

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98926

One way to kind of achieve the layout you want is to stop floating .productDetailsPanel, and give it a left margin of 25% (i.e. the width of .categoryPanel, plus spacing between them). (You’ll also want to remove the top margin on .categoryPanel.)

But that does mean the spacing between your columns will be defined as a percentage of the .container, rather than a fixed number of pixels.

Upvotes: 2

Related Questions