Html – Align Checkbox inside a

alignmentcssfirefoxhtmlsafari

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.

Best Answer

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.