Radio/checkbox alignment in HTML/CSS

Question

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:

&l         


        

Answer 1

I wouldn't use tables for this at all. CSS can easily do this.

I would do something like this:

   

      
      Option 1
   

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Note: I have used the clearfix class from : http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */