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.