Clever Geek Handbook

How do I get an auto-height div container with floating divs inside?

I have the following HTML

<style type="text/css">
<!--
.msg_ok{
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 16px;
    margin:0 auto;
    padding:10px;
    width:500px;
    height:auto;
    display:block;
}
.msg_ok{
    background-color:#DCFFB9;
    border:#003300 1px solid;
    color:#003500;
}
-->
</style>

      <div class="msg_ok" style="height:auto;">

        <div style="display:block;float:left;width:350px; height:auto;">
          <p>line 1<br>
          line2<br>
          line3<br>
          line4<br>
          line5<br>
          </p>
        </div>
        <div style="display:block;float:left;width:100px; height:auto;">
        <a href="#">Print</a>
        </div>

      </div>

And I am getting this result

enter image description here

however, how can I get a result like the following: an auto-height container div that fits its size with the floating divs inside?

enter image description here

Thank you in advance

+3


source to share


5 answers


add these

.msg_ok{
    overflow:hidden;
    zoom:1;
}


and remove height:auto

which is useless since the height is always auto (default). the problem you are having is how to contain the float

+8


source


I think you are looking for a "hack" fix to avoid the parent losing the parent when it contains floated elements, right?

Add <div class="clear">&nbsp;</div>

after the last floating div and then use the following CSS:



.clear {
   float: none;
   clear: both;
   height: 0;
}
+2


source


You need to add an element after the floats that clears the floats. Usually:

<br style="clear:both" />
+1


source


try it

Jsfiddle height auto

Make display property "inline-block" for class msg_ok

+1


source


The best way is to use clearfix. See this link - http://css-tricks.com/snippets/css/clear-fix/

0


source






More articles:


All Articles