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 style="margin: 0 0 0 20px;">AAA</div>
      <div style="margin: 0 0 0 5px; ">BBB</div>
   <div id="detailData">

This displays as:


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



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.


And a demo:

    CSS Howto..

    How do I enlarge images on a web page

    How do I add extra slides to this pure CSS text rotator?

    How can I make an svg scale with its parent container?

    how to add a CSS class inside a JavaScript setup code?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to make beatiful select lists?

    How do I configure syntax highlighting for LESS in coda?

    How can I get the seletced filename from file button?

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    advice about how to vertically center content in fluid element

    Do East Asian (e.g. Chinese) characters have baselines? How do they align with English in CSS?

    HTML table-cell how to set width

    How do I force span elements to remain in place between variable length text and an image element?

    How to make CSS Multi Column layout over html to move between the columns on user click

    How do you spin side to side using css3 animation?

    How to apply CSS to list in HTML

    How to show hidden div when javascript is disabled?

    How to make <'details'> drop down on mouse hover

    How can i create a div which contains two divs and stretch automatically

    How to re-use common css rules in css( sass ) [closed]

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How to fit label “css width”

    ckeditor - how to get custom-css with id to work?

    How to perform --include-css when using the Jekyll stylus plugin

    How can I improve my webpage code to be scalable for smaller sizes?

    How to rewrite this css for IE

    How to add CSS to struts2 tags

    How style selected option with CSS without styling all the other options?

    How can I fix left menu in bootstrap 3.0? [closed]