How can I line up my CSS DIVs


Tags: html,css

Problem :

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.



Solution :

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/


    CSS Howto..

    How to make the gif photo to be same width as the table?

    CSS animations - How to toggle direction with one keyframes declaration

    CSS - How to select nth-child of form element?

    How to center multiple line text in html using css, just like
    ?

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to add multiple css gradient as a multiple background?

    How to set focus int o next tab using tab key?

    CSS, how to size an img back to its width attribute

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    how to give space for every row (CSS issue)

    How to restore color in css after mouse leave?

    How to center vertically child elements inside div [duplicate]

    How can I join background images?

    How to display separate paragraphs in the same area using CSS HTML

    how to make the parent width equals the width of all element inside it?

    How do I make the link in the back div clickable

    How does positioning work in HTML/CSS?

    How can I make this a horizontal list?

    How can I make a different CSS for the first child
    ?

    How to make last element of second level of menu to drop up?

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How to make children auto fit parent's width only with CSS?

    How to put six divs in two rows

    How to layer elements with CSS position property?

    How to keep a sticky menu contained inside a floating sidebar?

    How to include a font .ttf using CSS?

    How to design multiple time clock wise rotation of a image in css

    How to get a CSS selector using Selenium WebDriver?

    How to put CSS and HTML in one page of code? [duplicate]

    How to vertically align a form and image