jeph perro jeph perro - 2 months ago 9
HTML Question

CSS for container divs and falling to the next line

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

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

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.

Comments