DIV over floating

[9three]

Hey,

I have two DIVs, one floats left, the other one right. But its not staying within the designated area, its over floating out of it.

Here is the pic: http://i261.photobucket.com/albums/i...dez305/div.jpg

HTML:

        <div id="subTop"></div>
        <div id="subInfo">
          <div id="tableTitle">
          Start clicking
          </div>
          <div id="table">
            <div id="left">Option one</div>
            <div id="right">Option two</div>
          </div>
        </div>
        <div id="subBottom"></div>

CSS

#left
{
  float: left;
}

#right
{
  float: right;
}

#subTop
{ 
  width: 308px;
  height: 3px;
  margin: 0px;
  padding: 0px;
  background: url(../images/subSectionBrownTop.jpg) no-repeat;
}

#subInfo
{
  margin: 0px;
  padding: 0px 5px 0px 5px;
  background: #d9d0b8;
}

#tableTitle
{
  width: 288px;
  margin: 0px;
  padding: 5px 5px 5px 5px;
  height: 12px;
  color: #FFFFFF;
  font-weight: bold;
  background: #447579;
}

#table
{
  width: 286px;
  margin: 0px;
  padding: 2px 5px 2px 5px;
  border-left: 1px solid #9e956a;
  border-right: 1px solid #9e956a;
  border-bottom: 1px solid #9e956a;
  background: #f8f5ec;
}

#subBottom
{
  width: 308px;
  height: 3px;
  margin: 0px;
  padding: 0px;
  background: url(../images/subSectionBrownBottom.jpg) no-repeat;
}

It's suppose to be under the green part, but within the 1px border. If you notice, its way out.

[Rayzur]

Add overflow:hidden to the #table div to force modern browsers to contain the floats. It works in IE because the width has given it "haslayout".

#table
{
  width: 286px;
  margin: 0px;
  padding: 2px 5px 2px 5px;
  border-left: 1px solid #9e956a;
  border-right: 1px solid #9e956a;
  border-bottom: 1px solid #9e956a;
  background: #f8f5ec;
  overflow:hidden;
}

[9three]

thank you! that worked