Forum Moderators: not2easy
I've been struggling with the below code for hours, and am unable to figure it out. Basically the problem is the 'container' or 'main_body' doesn't stretch to accomodate the content. It works fine in IE6 but not Firefox.
Can anyone help, please?
Thanks!
body
{
background-color:#5B584E;
margin-top:0px;
font-family:sans-serif, georgia, times;
font-size:12px;
}
.container
{
width:775px;
background-color:#ffffff;
clear:all;
}
.body_padding
{
padding:3px;
}
.mast_head
{
background-color:#3C382F;
color:#ffffff;
height:50px;
line-height:50px;
}
h2,h3
{
margin:0px;
}
.divider
{
line-height:3px;
background-color:#ffffff;
}
.orange_back
{
background-color:#fe7502;
background-repeat:repeat-x;
height:100px;
}
.main_body
{
}
.left
{
width:500px;
float:left;
margin:0px;
}
.vertical_divider
{
width:3px;
background-color:#ffffff;
float:left;
}
.right
{
background-color:green;
width:266px;
float:left;
margin:0px;
}
.left_header
{
background-color:#DADBD6;
color:#524F44;
text-align:left;
border-bottom:1px solid silver;
padding:5px;
}
.left_body
{
background-color:#E8E8E1;
color:#524F44;
text-align:left;
padding:5px;
}
.right_header
{
background-color:#524F44;
color:#E8E8E1;
text-align:left;
border-bottom:1px solid #777164;
padding:5px;
}
.right_body
{
background-color:#3C382F;
color:#E8E8E1;
text-align:left;
padding:5px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="container">
<div class="body_padding">
<div class="mast_head">
<h2>Liquid Meadow</h2>
</div>
<div class="divider">
</div>
<div class="orange_back">
test
</div>
<div class="divider">
</div>
<div class="main_body">
<div class="left">
<div class="left_header">
<h3>left header</h3>
</div>
<div class="left_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
</div>
<div class="vertical_divider">
</div>
<div class="right">
<div class="right_header">
<h3>right header</h3>
</div>
<div class="right_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
I think I had a similar problem a couple weeks ago. I'm not an expert in CSS, but maybe I can help. I've been told that the container is not stretching because the floats are not enclosed. IE automatically encloses this float "due to it's non-standard autoenclosing behavior" (as cEM stated). Take a look at this thread for the solution: [webmasterworld.com...]
Hope this helps.
You have no idea how long I've suffered with this and how many hours I've spent looking around the web trying to find an answer.
Thanks! And thanks again. :)
