Align checkbox inside <div>

Question

I seem to have a strange problem that I cannot 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 without anything but the default material from Dreamweaver placed inside the body.

Using this css:

@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 displays correctly in safari, text on the left and checkboxes aligned to the right inside the div.

In firefox, this is not the case.

The flags look as if they have omitted a line.

It looks like this is due to a problem that I cannot understand, but if the checkbox is selected first, for example:

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

It makes the intended path in Firefox, although, as expected, it is not very good at safari.

I can not find what causes the line to fall.

Thanks.

Answer 1

, html. , , . <br> -.

- -

.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>

, . div, . class= .cb-row input

for= id= , / .