Question

I have the following CSS and HTML:

div#actionList { float: left; height: 25px; margin: 10px; padding: 0px; }
div#actionList div { float: left; }

<div id="bdy">  
   <div id="actionList" class="btn1" >
      <div>xx</div>
      <div style="margin: 0 0 0 20px;">AAA</div>
      <div style="margin: 0 0 0 5px; ">BBB</div>
   </div>
   <div id="detailData">
      CCC
   </div>    
</div>

This displays as:

   AAA BBB CCC

What I would like to do is to have this display as:

   AAA BBB

   CCC

Can someone tell me how I can do this. How I can make the detailData DIV data
start below the “actionList” information.

Answer 1

div#detailData { clear : both; }​

This will put the #detailData div on it’s own line:

The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them.

Source: https://developer.mozilla.org/en/CSS/clear

And a demo: http://jsfiddle.net/KBges/