CODEWITHSUNDEEP
csshtmlcss-float
user961627
user961627

Reputation: 12747

Container div not filled in by contained tables

I have a div that contains two other divs, one floated to the right and one to the left, and both of these inner DIVs have a table each. I need the outermost div to contain the divs within it, but it doesn't. It seems as if the inner divs don't contain the inner tables. Because the outermost div has a border, I can see that its height is a lot shorter than the contained content.

<style>
.bluebox{ border:1px solid blue; }
.floatleft
{
float:left;
}
.floatright
{
float:right;
}
</style>

This is my HTML:

<div class='bluebox'>

  <div class='floatleft'>
    <table cellspacing=10>
     <tr><td class='head'> Qty ordered: </td><td> 100</td> </tr> 
     <tr><td class='head'> Description: </td><td> Business Card</td></tr>
     <tr><td class='head'>Stock: </td><td> SPRONDIGRLE WHITE</td></tr>
     <tr><td class='head'>Lamination: </td><td> XXX</td></tr>
    </table>
  </div>

  <div class='floatright'>
    <table cellspacing=10>
      <tr><td class='head'> Parent A3 Sheets: </td><td>XXX </td></tr>
      <tr><td class='head'>Finish Size: </td><td> 9 x 5cm</td></tr>
      <tr></tr>
      <tr><td class='head'>Finishing touches: </td><td> Rounded corners</td></tr>
   </table>
  </div>

</div>

Since I need the border to show, I can't do something like padding-bottom:-5000px; overflow:hidden, because then the border will stretch the page by miles!

Upvotes: 0

Views: 113

Answers (1)

cimmanon
cimmanon

Reputation: 68319

You need to clear your floats. The simplest way to do that would be like so:

.bluebox{ border:1px solid blue; overflow: hidden }

http://jsfiddle.net/LBfxY/

There are other ways to do this, but using overflow is the most concise. Here are some demos on other clearfix techniques:

http://codepen.io/cimmanon/pen/qDjdr

Upvotes: 2

Related Questions