Align Checkbox inside a <div>

alignment, css, firefox, html, safari

Solution

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.

Problem

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.

Original source