CSS for container divs and falling to the next line

Question

I'm more of a programmer than a designer, and I'm trying to embrace <div>s rather than using tables but am getting stuck.

Here's what I'm trying to do. I am setting up a survey page. I want each question's text to sit at the top of the blue div, and wrap if it's too long. I want all of the red divs to line up at the top right corner of the container div.

Layout http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

Here's what I've started with, it works fine so long as the frame is more than 420 pixels wide. Then the red div skips to the next line. I think I may have approached it wrong, perhaps I should be floating things to the right?

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

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

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

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 2

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 3

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 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

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 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