Making the container grow

Florian Brucker

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

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

On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker <to**@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

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

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

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

Not really.

Except for what Els said. :-\

Els

Neal wrote:

On Mon, 26 Jul 2004 17:55:07 -0400, Neal
<ne*****@yahoo.com> wrote:
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker
<to**@torfbold.com> wrote:

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

Not really.

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

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

Neal wrote:
On Mon, 26 Jul 2004 17:55:07 -0400, Neal
<ne*****@yahoo.com> wrote:
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker
<to**@torfbold.com> wrote:

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

Not really.

Except for what Els said. :-\

Time for coffee? ;-)

ALWAYS time for coffee! 8-D

Florian Brucker

Okay, thanks you both!

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

Florian

Making the container grow

This discussion thread is closed

Similar topics