homepage Welcome to WebmasterWorld Guest from 54.234.2.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to make a container contain a float
CSS, how to contain only a float within a div, without overflowing
topr8




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

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




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

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

topr8




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

thanks so much!

i wish i'd know that 2 years ago!

lucy24




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

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




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


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




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

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

stever




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

<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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved