By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

container's not expanding

P: n/a
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

Apr 13 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 2007-04-13, Miked <mi*************@gmail.comwrote:
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"></divshould work (although IIRC that div might need
to contain &nbsp; 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">
Apr 13 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.