Como corrigir a combinação de flutuação clara do IE7
Eu tenho uma classe field_wrapper div que contém os 3 sub divs field_label, field_input e field_error
Eu preciso colocar o field_label, field_input lado a lado e field_error abaixo dos dois primeiros.
Veja abaixo o código css para saber como eu consegui isso. Meu problema é que não está funcionando no IE7. limpar ambos aplicados ao field_error não está funcionando.
Mesmo depois de pesquisar por um longo tempo, não consigo encontrar um método adequado para corrigir isso sem adicionar a marcação HTML. Dicas de CSS ou qualquer outro método para evitar código de marcação extra
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>