As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div takes up the remaining space. Everything looks good when my browser window is maximized, but when I resize it to be smaller, the two DIVs no longer align properly. The top of the right DIV ends up below the bottom edge of the left DIV (although the left boundary of the right DIV remains aligned with the right boundary of the left DIV).
How can I ensure that both DIVs stay on the same horizontal line even when the browser window is not maximized? Here is the HTML I am currently 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 code:
.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;
}
Any advice on how to resolve this issue would be greatly appreciated! - Dave