CSS for container divs and falling to the next line

Answer 1

Very little testing here, but I think you'll want "clear: both;" on .greencontainer instead of "float: left". Also remove "clear: both" from .bluecontainer

See more info at: http://www.quirksmode.org/css/clearing.html

Answer 2

don't use clear:both on your bluecontainer because it will clear any element on both side(left and right). and you should make the redcontainer float to right.

Answer 3

Don't float anything but the red container, and float it to the right. Make sure the HTML for the red containers is placed before the HTML for the blue containers. Keep the static width on the blue container, and keep your clear:both on the green container.

Answer 4

You have "clear: both" on the blue div. That is what I think causes the problem.

Look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ which had some handy demonstrations.

Answer 5

Here is what I would do:

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

with css:

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

PS Padding values should always have units, unless they are zero.

Answer 6

I don't think you need to float the green container at all as it is the containing div. Plus, a "clear:both" statement would only be needed if putting multiple blue/red divs in the same green container.

Try

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

You may also need to add a right margin to the blue container or left-margin to the red container to get consistent spacing between them rather than using padding which relates to the spacing inside the div not around it