Float bug fix in div to expand

HTML:
<div class="container">
<div class="inner_div">
blablabla <br> blablabla <br> blablabla<br>
</div>
</div>
 
CSS:
.container{width:300px;background:red;}
.inner_div{float:left;width:200px;font:12px arial;}
 
The red background in the container div will not expand when you add content to the inner div. So here is a simple trick to get the container div to expand.
 
Just add
.container{overflow:hidden;}

Download this snippet

Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it. You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div. Source: <a href="http://htmlcsstutorials.blogspot.com/2009/07/float-bug-fix-in-div-to-expand.html">float bug fix</a>

Twitter Twitter

Tags

float css html div

5 Comments to “ Float bug fix in div to expand”

  1. Anonymous  on Sep 25, 2009

    vO0HoF <a href="http://buyuslcfdufg.com/">buyuslcfdufg</a>, [url=http://tibckmraurof.com/]tibckmraurof[/url], [link=http://lsculfsqepzi.com/]lsculfsqepzi[/link], http://qyhuytdeefio.com/

  2. Anonymous  on Nov 04, 2009

    rGCyi6 <a href="http://uhezlyecrxqf.com/">uhezlyecrxqf</a>, [url=http://plqgkzyddtwa.com/]plqgkzyddtwa[/url], [link=http://jtaplmufdxjz.com/]jtaplmufdxjz[/link], http://exzkkhodrgxf.com/

  3. Anonymous  on Dec 29, 2009

    kQKzr8 <a href="http://gmhsoqewnfer.com/">gmhsoqewnfer</a>, [url=http://gzhmbnojcnia.com/]gzhmbnojcnia[/url], [link=http://wnpkgszhjjvu.com/]wnpkgszhjjvu[/link], http://jvmruygytzjr.com/

  4. Anonymous  on Jan 13, 2010

    g5qxbw <a href="http://rgzffdcekemc.com/">rgzffdcekemc</a>, [url=http://bghudrucahtx.com/]bghudrucahtx[/url], [link=http://ghkjhjogsxyq.com/]ghkjhjogsxyq[/link], http://hlpjxudpnysz.com/

  5. Anonymous  on Mar 14, 2010

    yuFBoR <a href="http://oiywboazsllt.com/">oiywboazsllt</a>, [url=http://qyyaqgrwdlef.com/]qyyaqgrwdlef[/url], [link=http://mudcvvknzgeq.com/]mudcvvknzgeq[/link], http://vrbgzncyrlad.com/

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>