Forum Moderators: not2easy
When I use IE to browse the following code it displays everything correctly.. but when I use FireFox, the bottom pane 'floats' behind the middle pane. I am not able to fix this problem, probably because I am not a CSS expert. Your suggestions will be highly appreciated. I do not want to alter HTML structure so help me getting the CSS right.
Here goes my HTML
<body>
<div id="top">Top Pane</div>
<div id="mid">
<div id="content-wrap">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed auctor lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed auctor lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed auctor lacus.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed auctor lacus.</p>
</div>
</div>
</div>
<div id="bot">Bottom Pane</div>
</body>
#top {background: red; height: 100px;}
#mid {background: blue;}
#content-wrap {background: yellow; width: 400px;}
#content-wrap div.left {background: #333; width: 200px; float: left;}
#content-wrap div.right {background: gray; width: 100px; float: right;}
#bot {background: green; height: 100px;} Thanks,
MG
