How to make a container contain a float - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

How to make a container contain a float

CSS, how to contain only a float within a div, without overflowing

topr8

8:00 pm on Jul 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Consider a div, with a border, which contains another div that is a float with an image and some text. The containing div does not have enough text/content to stretch below the float and thus the border of the containing div shows above the bottom of the float.

is there an elegant way to prevent this? eg. to ensure the border of the containing div shows below the float, previously i have ensured there is enough text to prevent this issue, but this workaround will not do in this case.

example code would be:


<!DOCTYPE HTML>
<head>
 <style type="text/css">
 .container{width:95%;padding:10px;margin:10px;border:1px dotted black;clear:both;}
 .floater{float:left;padding:10px;text-align:center;}
 </style>
</head>
<body>
 <div class="container">
 <div class="floater">
 <p><img src="http://www.webmasterworld.com/gfx/logo.png" width=109 height=56></p>
 <p>here is the Logo!</p>
 </div>
 <p>
 not enough text to stretch beneath the float
 </p>
 </div>
 <div class="container">
 <div class="floater">
 <p><img src="http://www.webmasterworld.com/gfx/logo.png" width=109 height=56></p>
 <p>here is the Logo!</p>
 </div>
 <p>
 another logo here and so on .....
 </p>
 </div>

</body>
</html>

ps. long time member, but rarely seen on this board. hope i've posted correctly as per the charter! - the indentation of the code seems to be lost!

Fotiman

8:14 pm on Jul 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Add this to your .container styles:
overflow: auto;

topr8

8:23 pm on Jul 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

thanks so much!

i wish i'd know that 2 years ago!

lucy24

9:08 pm on Jul 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Eeuw. Wouldn't that give you a scroll bar? What happens if you set a min-height on the container?

the indentation of the code seems to be lost!

If you make the post in a
�text editor
� you can globally replace
� �leading spaces
� � with non-breaking spaces ;)

Either "code" or "pre" ought to work the same way, but it seems to depend on the whim of the moment.

Paul_o_b

10:20 pm on Jul 19, 2012 (gmt 0)

10+ Year Member

Eeuw. Wouldn't that give you a scroll bar? What happens if you set a min-height on the container?

min-height is of no real use because content may be variable height.:)

Overflow (other than visible) creates a new "block formatting context" and will then automatically contain child floats. You will not get a scrollbar unless the content inside is too big. In most cases you can use overflow:hidden to better effect or use the revised clearfix method (google it).

As a matter of interest overflow isn't the only property that will automatically contain floats it is any property that creates a new block formatting context. Which are as follows (taken directly from the specs):

"Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents."

Overflow (other than visible)is the most useful for containing floats but only when you don't need visible overflow. If you need visible overflow then use the clearfix method or indeed float the parent if the design allows.

Note that IE7 and under just need haslayout to contain child floats so they need an extra rule suh as the proprietary zoom:1.0 or perhaps more validly a dimension where possible.

Fotiman

10:34 pm on Jul 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

No, that would not give you a scroll bar, as you can see here:
[jsfiddle.net...]

stever

4:24 am on Jul 20, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<p class="clearer">
another logo here and so on .....
</p>
****************
.clearer {
clear:both;
}
****************
in this case.

Otherwise, <div class="clearer"></div> in an appropriate position.

Paul_o_b

4:13 pm on Jul 20, 2012 (gmt 0)

10+ Year Member

Although a valid technique (and we all used to used empty clearer divs in the "olden days") there really isn't any need these days to clutter up your nice clean html mark up with empty divs.:) The empty clearer div should be consigned to history along with the spacer image.