Stylesheets - container's not expanding

Author

container's not expanding

Miked

2007-04-13, 10:18 pm

Hello:

I'm relatively new to CSS, and I'm doing a site where I don't want to
use any tables.

I've gotten pretty far, and the site has the layout I want. My only
problem is that I'm using the flot positional paremter a lot on
containers, and it really seems to do what I want. Except when I put
other containers in these containers, they don't expand vertically
like I want. Here's the stylesheet:

/* ****** CONTAINERS ******* */

#container
{
margin: 0 auto;
width: 1000px;
padding: 0 10px 0 10px;
text-align: left;
position: relative;
border: 1px solid red;
}

* html #container
{
width: 1024px;
margin: 0 auto;
position: relative;
border: 1px solid black;
}

#container #header
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin-top: 10px;
width: 1000px;
height: 80px;
border: 1px solid black;
}

#container #header #leftHeader
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 800px;
height: 80px;
}

#container #header #acctManagement
{
position: absolute;
top: 0px;
left: 800px;
right: 0px;
bottom: 0px;
width: 200px;
height: 80px;
border: 1px solid black;
}

#container #body
{
position: relative;
color: #ffffff;
width: 1000px;
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid black;
}

#container #footer
{
position: relative;
color: #ffffff;
height: 25px;
width: 1000px;
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid green;
}

#container #center
{
position: absolute;
top: 97px;
left: 205px;
right: 0px;
bottom: 0px;
color: #ffffff;
height: 300px;
width: 495px;
margin-left: 5px;
text-align: right;
border: 1px solid blue;
}

#right
{
position: absolute;
top: 97px;
left: 705px;
right: 0px;
bottom: 0px;
color: #ffffff;
height: 300px;
width: 295px;
margin-left: 10px;
text-align: right;
border: 1px solid blue;
}

#right2
{
float: top;
float: right;
color: #ffffff;
height: 400px;
width: 295px;
margin-left: 10px;
text-align: right;
border: 1px solid blue;
}

#center
{

}

#container #left
{
float: left
color: #ffffff;
width: 190px;
height: 300px;
margin: 5px 5px 5px 0px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid red;
}

And now the file (these are just files i"m working with in order to
get the layout I want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylesheets/
standard.css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="leftHeader"></div>
<div id="acctManagement"></div>
</div>

<div id="container">
<div id="right2"></div>
<div id="left"></div>
</div>

<div id="footer"></div>
</div>

</body>
</html>

What I don't understand is why a container as a float won't
automatically expand. is there another option I shoudl be looking
into?

Thanks very much in advance!

Mike

Ben C

2007-04-13, 10:18 pm

On 2007-04-13, Miked <mike.dershowitz@XXXXXXXXXX> wrote:
> Hello:
>
> I'm relatively new to CSS, and I'm doing a site where I don't want to
> use any tables.
>
> I've gotten pretty far, and the site has the layout I want. My only
> problem is that I'm using the flot positional paremter a lot on
> containers, and it really seems to do what I want. Except when I put
> other containers in these containers, they don't expand vertically
> like I want.

That is the correct behaviour.

[...]
> What I don't understand is why a container as a float won't
> automatically expand.

If you were using floats to embed figures in paragraphs of text, rather
than to make general purpose column-like containers, you wouldn't want
the paragraph the float started in to extend past the bottom of the
float leaving a gap before the start of the next paragraph. That's why
floats behave the way they do.

> is there another option I should be looking into?

The easiest fix in this case is to add "overflow: hidden" to #container.
That makes #container a "block formatting context root", and computed
values of auto heights for block formatting context roots _do_ include
floating descendents after all.

The other approach is to put something in #container with clear:both set
on it. It will be positioned vertically after the floats (to "clear"
them) and therefore establish #container's height. <div
style="clear:both"></div> should work (although IIRC that div might need
to contain to kick IE into action).

By the way, you have two elements with the same id which is bad, use
class instead, and always use the strict DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">