CSS Float Problem

[lostprophetpunk]

I have a box which contains four divs...

 

lowboxc

lowboxtop

lowboxmain

lowboxbottom

 

I then have another box inside with four divs...

 

testc

testtop

testmain

testbottom

 

I am trying to get three of the 'test' divs inside the 'lowbox' div so that there are three of them, one for the left, one in the middle and then one on the right.

 

I can get the left and middle ones working by using 'float:left' and 'margin:auto', but when I use the 'float:right' property on the last one, then the last one does float to the right, but displays underneath the other boxes.

 

The total width of the boxes should fit in the width of the lowbox, so why isn't it working?

 

This is the css for the divs mentioned above...

#lowboxc {
  width: 660px;
  margin: auto;
}

#lowboxtop {
  margin-top: 10px;
  width: 650px;
  height: 30px;
  background: transparent url(images/lowboxtop.png) no-repeat center center;
  font-family: "trebuchet ms", sans-serif;
  font-size: 18pt;
  font-weight: bold;
  color: #000000;
  padding-left: 10px;
  padding-top: 10px;
}

#lowboxmain {
  width: 660px;
  height: auto;
  background-color: #bf003a;
}

#lowboxbottom {
  width: 660px;
  height: 30px;
  background: transparent url(images/lowboxbottom.png) no-repeat center center;
}

.testc {
  width: 170px;
}

.testtop {
  width: 170px;
  height: 20px;
  background: transparent url(images/testtop.png) no-repeat center center;
}

.testmain {
  width: 150px;
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  font-family: "trebuchet ms", sans-serif;
  font-size: 9pt;
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
}

.testbottom {
  width: 170px;
  height: 20px;
  background: transparent url(images/tesbottom.png) no-repeat center center;
}

 

Here is the html for those divs...

  <div id='lowboxc'>
   <div id='lowboxtop'>Testimonials</div>
    <div id='lowboxmain'>
      <div class='testc' style='float:left;'>
        <div class='testtop'></div>
          <div class='testmain'>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend, arcu at condimentum faucibus, urna nulla vehicula lectus, ut suscipit quam nisi euismod elit. Vestibulum massa dolor, venenatis ac, malesuada eu, aliquet sed, dui. Donec at nibh.
          </div>
        <div class='testbottom'></div>
      </div>
      <div class='testc' style='margin: auto;'>
        <div class='testtop'></div>
          <div class='testmain'>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend, arcu at condimentum faucibus, urna nulla vehicula lectus, ut suscipit quam nisi euismod elit. Vestibulum massa dolor, venenatis ac, malesuada eu, aliquet sed, dui. Donec at nibh.
          </div>
        <div class='testbottom'></div>
      </div>
      <div class='testc' style='float:right;'>
        <div class='testtop'></div>
          <div class='testmain'>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend, arcu at condimentum faucibus, urna nulla vehicula lectus, ut suscipit quam nisi euismod elit. Vestibulum massa dolor, venenatis ac, malesuada eu, aliquet sed, dui. Donec at nibh.
          </div>
        <div class='testbottom'></div>
      </div>

[haku]

actual width = stated width + padding.

 

Maybe that can help.

[lostprophetpunk]

I new that, so that is why the testmain div has the width of 150 instead of 179 like the other test divs.

[haku]

try floating all three testc divs to the left.

 

If you had a link, it would be much easier to help. Got one?

[lostprophetpunk]

try floating all three testc divs to the left.

 

If you had a link, it would be much easier to help. Got one?

I haven't got a link, as I am coding it offline. I have aligned the first two divs to float left, that makes the divs align horizontally, but then it breaks out of the lowbox div.

 

Maybe this picture will help you out a bit more.

[haku]

Add:

 

overflow: auto;

 

to div.lowbox

 

It will hopefully work, though it may just add scroll bars.

[bronzemonkey]

It's a float clearing issue.

 

Either float all the boxes as haku said, use overflow:hidden on the container that is not floated but contains floated elements, or google "clearfix".

[TheFilmGod]

Are you using all these divs to create rounded corners...? If so, you can use absolute positioning. This is the way I create rounded corners since it doesn't require any clearing. If you need help doing it this way, just reply.