Align Checkbox inside a

Question

I seem to be having a strange problem which I can't fully understand.

This is my html:

<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox"  type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/> 
Observações:
<input name="Observações" class="checkbox"  type="checkbox" value="Observações" checked />
</div>

Inside an Html page with nothing else except the default stuff from Dreamweaver, placed inside the body.

With this CSS attached:

@charset "UTF-8";
/* CSS Document */

.menu 

{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;

 }

 .checkbox {

float:right;
}

Now this code renders properly in Safari, text on the left and check boxes aligned on the right inside a div.

In Firefox it does not.

The checkboxes seem like they dropped a line.

It seems to be related to a problem I can't understand, but If the checkbox comes first like:

<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked  />Cliente:
<br/>

It renders the intended way in Firefox although as expected its not good on Safari.

I can't seem to find what's causing the line drop.

score 8 · Accepted Answer · answered Jul 06 '09 at 12:36

Floats only affect code that follows them in the html. Since you have the input after the label, it will be floated right but on a new line. Different browsers render <br> in different ways.

A good cross-browser way to do checkboxes is

.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}

<div class="menu">
    Por favor seleccione os conteúdos:
    <div class="cb-row">
        <label for="nome">Nome:</label>
        <input id="nome" name="Nome" type="checkbox" value="Nome" checked />
    </div>
    <div class="cb-row">
        <label for="data">Data:</label>
        <input id="data" name="Data" type="checkbox" value="Data" checked />
    </div>
    <div class="cb-row">
        <label for="cliente">Cliente:</label>
        <input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
    </div>
    <div class="cb-row">
        <label for="ob">Observações:</label>
        <input id="ob" name="Observações" type="checkbox" value="Observações" checked />
    </div>
</div>

The label is floated left and the checkbox is floated right. They are contained in a row div that controls the margins between rows. I removed the class= from the input and instead styled the input in .cb-row input

An advantage of using label with the for= and input with the matching id=, is that when you click on the label, the checkbox will be selected/unselected.

+1 for semantic correction. One little thing for correct XHTML: checked="checked" instead of only checked. — Residuum, Jul 06 '09 at 12:39
Thank you that is very helpful, im still digesting it. "Since you have the input after the label, it will be floated right but on a new line." I didnt even had labels did I? In a way Im in need of some serious practice, care to recommend a good book? Thank you. — Marvin, Jul 06 '09 at 13:24
I was using label in a general sense. "Nome:" is the label for the checkbox whether it is marked up as a label or not. It's been awhile since I have read a css book but if you search for "css book" on stackoverflow http://stackoverflow.com/search?q=css+book there are a lot of resources listed. — Emily, Jul 06 '09 at 13:33
Duh, should have thougth of searching for such thread :) If its anyone interested im ordering: Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS and: CSS Mastery: Advanced Web Standards Solutions Thank you. — Marvin, Jul 06 '09 at 13:41

Align Checkbox inside a

1 Answers1