Expanding Content Box does not work in FF

Hi,

I'm observing the same problem as described here [webmasterworld.com].

I have a two column layout that is supposed to expand vertically depending on the content. I want both columns to have the same length no matter what, so I'm using a background image that simulates two columns which is embedded in the .mainwrap div (z-index: 0). I then defined two divs, one of them being the main content div and the other one being a sidebar on the right (both z-index:1). Both divs have specified widths and are floated left and right, respectively.

The layout works in Opera and IE, but not in FireFox. The mainwrap (and thus the bg image) does not expand to include all the content. In fact, with no height specified it apparently is not displayed at all (height: 0). It works in FF when I set height: 2000px; for instance, but I want the mainwrap to expand dynamically depending on the content. I tried height: auto; but it didn't work.

I actually have the problem twice. The .wrapper div which encloses everything, including the .mainwrap, .content and .sidebar does not expand either.

Somebody in the other topic suggested the FF problem might be caused by floating the elements inside the .mainwrap div and that's what I'm doing. I can't think of any other solution for the two column layout.

The complete code is W3 compliant/validated.

body
{
background-color: #4C4C4C;
text-align: center;
padding: 8px 0px 8px 0px;
margin: 0px;
}
.wrapper
{
width: 672px;
margin: 0px auto 0px auto;
background-color: #2F3030;
border-style: solid;
border-width: 2px;
border-color: #000000;
text-align: left;
z-index: 0;
}
.mainwrap
{
width: 672px;
background-image: url(bg.jpg);
background-repeat: repeat-y;
z-index: 1;
}
.content
{
width: 474px;
padding: 25px 25px 5px 25px;
z-index: 2;
float: left;
margin: 0px;
}
.sidebar
{
float: right;
width: 148px;
z-index: 2;
padding-bottom: 15px;
margin: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="site.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="mainwrap">
<div class="content">
TEXT TEXT TEXT
</div>
<div class="sidebar">
TEXT TEXT TEXT
</div>
</div>
</div>
</body>
</html>

Help greatly appreciated.

- Lupi

Expanding Content Box does not work in FF

Works in IE, CSS + HTML W3 compliant

Lupi

createErrorMsg

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week