FF not expanding container div

**scottpoliseno** · 07-18-2007 03:01 PM

All the divs are relative or default position... This is just a practice run...

I want the container to expand with the content if more text is added.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" href="build1.css" type="text/css" />
</head>
<body>

<div id="shell" align="center">

<div id="container" align="left">

<div class="header" id="header"></div>

<div id="contentcontainer">

<div id="left" class="left">This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...</div>
<div id="right">This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...</div>

</div>

</div>

</div>

</body>
</html>

CSS:

html
{
height: 100%;
}

body
{
height: 100%;
margin: 0px;
padding: 0px;
background-color: Gray;
}

#shell
{
position: relative;
top:0px;
left:0px;
width: 100%;
height: 100%;
}

#container
{
position: relative;
top:0px;
left:0px;
width: 780px;
height: 100%;
background-color: #FFFFFF;
}

#header
{
position:relative;
top:0px;
left:0px;
}

div.header
{
border:10px solid;
padding:50px;
background: #ffc;
clear: both;
}

div.header
{
height: 200px;
width:780px;
voice-family: "\"}\"";
voice-family:inherit;
width: 660px;
}

html>body .header
{
width:660px;
}

#contentcontainer
{
margin-top: 10px;
height: 100%;
}

#left
{
margin-left: 10px;
margin-top: 10px;
float: left;
border:10px solid black;
padding:0px;
background: #ffc;
}

#right
{
float: right;
width: 470px;
border:10px solid black;
padding:0px;
background: #ffc;
margin-right: 10px;
margin-top: 10px;
}

div.left
{
width: 250px;
voice-family: "\"}\"";
voice-family:inherit;
width: 210px;
}

html>body> .left {
width:210px;
}

Thanks!

Scott

**WebJoel** · 07-18-2007 04:36 PM

#contentcontainer
{
margin-top: 10px;
height: 100%;
}

is 100% of the user's browser's height. Try "auto" instead. That way, it will 'auto-expand' as more height is required.

Some good lorem ipsum dolar would look better to actually beta-test the container with something that could possibly be real...

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

**ray326** · 07-18-2007 07:14 PM

As the last div inside the #container put
<div style="clear:both"></div>
and see if that's not what you're looking for. Floated divs do not "push" against their containers.

Thread: FF not expanding container div

Thread Tools

Display

FF not expanding container div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions