Making the container grow

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > Making the container grow

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

Making the container grow

Florian Brucker

07-27-04 - 12:16 AM

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

[ Post Follow-Up to this message ]

Re: Making the container grow

Els

07-27-04 - 12:16 AM

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

[ Post Follow-Up to this message ]

Re: Making the container grow

Neal

07-27-04 - 12:16 AM

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.

[ Post Follow-Up to this message ]

Re: Making the container grow

Neal

07-27-04 - 12:16 AM

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. :-\

[ Post Follow-Up to this message ]

Re: Making the container grow

Els

07-27-04 - 12:16 AM

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

[ Post Follow-Up to this message ]

Re: Making the container grow

Neal

07-27-04 - 12:16 AM

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

[ Post Follow-Up to this message ]

Re: Making the container grow

Florian Brucker

07-27-04 - 05:17 PM

Okay, thanks you both!

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

Florian

[ Post Follow-Up to this message ]