467,912 Members | 1,568 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,912 developers. It's quick & easy.

Making the container grow

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
Jul 20 '05 #1
  • viewed: 6917
Share:
6 Replies
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me
Jul 20 '05 #2
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.
Jul 20 '05 #3
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. :-\
Jul 20 '05 #4
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me
Jul 20 '05 #5
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
Jul 20 '05 #6
Okay, thanks you both!

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

Florian
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Jayjay | last post: by
16 posts views Thread by Sensei | last post: by
20 posts views Thread by Martin Jrgensen | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.