Stylesheets - Making the container grow

Author

Making the container grow

Florian Brucker

2004-07-26, 7:16 pm

Here's the code:

<html>
<head>
<title>CSS Test</title>
<style>
div.container {
border-width:1px;
border-color:#000;
border-style:solid;
}

div.box {
border-width:1px;
border-color:#F00;
border-style:solid;
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
Hello World
</div>
</body>
</html>

When viewing this using Mozilla 1.6 and Opera 7.51 (don't know about
other browsers, no chance to test on them), the box-div breaks out of
the container-div (which only surrounds "Hello World").
When I remove the float:left; it works again, but I really do need it in
my layout.

Is there a way to make the container automatically include the
float:left;-div?

Thanks for any hints,
Florian

Els

2004-07-26, 7:16 pm

Florian Brucker wrote:

> Here's the code:
>
> <html>
> <head>
> <title>CSS Test</title>
> <style>
> div.container {
> border-width:1px;
> border-color:#000;
> border-style:solid;
> }
>
> div.box {
> border-width:1px;
> border-color:#F00;
> border-style:solid;
> width:200px;
> height:200px;
> float:left;
> }

div.clearall{
clear:both;
}

> </style>
> </head>
> <body>
> <div class="container">
> <div class="box"></div>
> Hello World

<div class="clearall"></div>

> </div>
> </body>
> </html>
>
> When viewing this using Mozilla 1.6 and Opera 7.51 (don't
> know about other browsers, no chance to test on them), the
> box-div breaks out of the container-div (which only
> surrounds "Hello World"). When I remove the float:left; it
> works again, but I really do need it in my layout.
>
> Is there a way to make the container automatically include
> the float:left;-div?

See my additions above :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me

Neal

2004-07-26, 7:16 pm

On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker <torf@torfbold.com>
wrote:

> Here's the code:

Why not a URL? Why make more work for me when you want my help?

> When viewing this using Mozilla 1.6 and Opera 7.51 (don't know about
> other browsers, no chance to test on them), the box-div breaks out of
> the container-div (which only surrounds "Hello World").
> When I remove the float:left; it works again, but I really do need it in
> my layout.

You gave an explicit height to the float, but does the container have any
height? What is it's height? Answer: it's content. The float is out of the
flow, so it's height isn't factored in. The container div should be only
1em high (if the text does not wrap). And looky, it is. Your example is a
perfect expression of what float really does.

> Is there a way to make the container automatically include the
> float:left;-div?

Not really.

Adding enough content to the container after the float to make the div
tall enough is what's normally done. Or set a height on the container, but
there's problems in that too. Min-height would be perfect here except for
IE's asinine CSS compatability.

Neal

2004-07-26, 7:16 pm

On Mon, 26 Jul 2004 17:55:07 -0400, Neal <neal413@yahoo.com> wrote:

> On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker <torf@torfbold.com>
> wrote:

>
> Not really.

Except for what Els said. :-\

Els

2004-07-26, 7:16 pm

Neal wrote:

> On Mon, 26 Jul 2004 17:55:07 -0400, Neal
> <neal413@yahoo.com> wrote:
>
>
>
> Except for what Els said. :-\

Time for coffee? ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me

Neal

2004-07-26, 7:16 pm

On 26 Jul 2004 21:59:53 GMT, Els <els.aNOSPAM@tiscali.nl> wrote:

> Neal wrote:
>
>
> Time for coffee? ;-)
>

ALWAYS time for coffee! 8-D

Florian Brucker

2004-07-27, 12:17 pm

Okay, thanks you both!

(And sorry for not putting it online but posting the code, will do
better next time.)

Florian