Can't get a div to be as long as I want

2 columns, full and equal height + header

[Jobarr]

Hello! I am really trying to get an all CSS layout to work and am having one real problem - the background image for my main content div isn't being shown correctly because the browser thinks the div is empty because the only content is an image and two floats.

More exactly:
I want a header, then a content div with a horizontal menu and 2 columns underneath it inside. In the content div I want a border image on the left side that goes all the way to the bottom of the screen and a background image in the bottom right. Right now, both of these images are only shown for one line in the content div because apparently the content div isn't extending any farther down than that because of the two floats inside.

Anyone have an idea how I can fix that?

Thanks :)

The CSS:

html 
{
height:100%;
margin: 0px;
padding: 0px;
}
body
{
background-color: #000000; 
text-align:center;
margin: 0px;
padding: 0px;
height:100%;
text-align: center;
}
#layout
{
margin: auto;
width: 760px;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;
}
#header
{
background-color: #000000;
height: 100px;
}
#content
{
background-image: url(border.gif);
background-repeat:repeat-y;
}
#wrapper
{
background-image:url(flame.gif);
background-position: bottom right;
background-repeat:no-repeat;
}
#menu
{
}
#main
{
float: left;
position: relative;
width: 550px;
padding: 5px;
}
#sidebar
{
float: left;
position: relative;
width: 160px;
}

The HTML

<div id="layout">
 <div id="header">
 <img src="header.gif" width="727" height="100" />
 </div>
 <div id="content">
 <div id="wrapper">
 <div id="menu"><p><img src="menu.gif" width="682" height="14" /></p>
 </div>
 <div id="main"><p>Lorem ipsum dolor sit amet...</div>
 <div id="sidebar">Lorem ipsum dolor sit amet...</div>
</div></div>
</div>

[createErrorMsg]

the background image for my main content div isn't being shown correctly because the browser thinks the div is empty because the only content is an image and two floats.

Add float:left; to #wrapper and it will expand to contain the floats. You will also need to give it a width. 100% would do it.

cEM

[Jobarr]

Ok, that's closer to what I want! But it only expands to contain the floats and if they aren't as long as the view port, then the border and the other image don't go the the very end of the page -- just to the end of the content! Basically I want the content/wrapper divs to be 100% of the height, minus 100px for the header.

Thanks though!

[createErrorMsg]

There are literally dozens of threads in this forum's recent history about making a page "100% height, unless the content is longer, then just as long as the content."

I'll see if I can dig up a link or two for you, but in the meantime you can run a site search [webmasterworld.com] and see what you dig up.

The short version is you need to use min-height and height in combination in order to get your content to be 100% of the viewport but stretch to hold content that is longer than the screen is tall. IE doesn't support min-height, however, so workarounds are needed.

cEM

[Jobarr]

I know all about that, I've done it before. :)

Here is the current problem, simplified, I can't figure out why #content is NOT taking up 100% of the height:

CSS:

html, body
{
height:100%;
margin: 0px;
padding: 0px;
}

#layout
{
margin: auto;
width: 760px;
min-height: 100%;
color:#000000;
background-color: #FFFFFF;
background-image: url(border.gif);
background-repeat: repeat-y;
}

#content
{
background-image:url(flame.gif);
background-position: bottom right;
background-repeat:no-repeat;
width: 100%;
height: 100%;
}

HTML:

<div id="layout">
<div id="content">
Lorem ipsum dolor sit amet...
</div>
</div>