Comment fixer IE7 combinaison flotteur clair

Question

J'ai un div class field_wrapper qui contient les 3 sous divs FIELD_LABEL, field_input et field_error

je dois mettre le FIELD_LABEL, côté field_input côte à côte et field_error ci-dessous les deux premiers.

S'il vous plaît voir ci-dessous le code css pour savoir comment j'ai réalisé ceci, Mon problème est son ne fonctionne pas dans IE7. clear both appliqué à field_error ne fonctionne pas.

Même après avoir cherché sur Google depuis longtemps, je ne peux pas trouver une méthode appropriée pour résoudre ce problème sans ajouter le balisage HTML. S'il vous plaît conseiller de pointe ou tout autre css méthode pour éviter le code de balisage supplémentaire

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

Answer 1

Si vous ne souhaitez pas supprimer la gauche du flotteur. Vous pouvez utiliser ce code wrapper

.field_wrapper { display: inline-block; } 
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
* html .field_wrapper { height: 1%; } 
.field_wrapper{ display: block; } 

Il travaille pour moi à chaque fois (IE6 aussi)

Mise à jour:

Je regardais ce nouveau et changé le balisage un peu, aussi l'a rendu valide xhtml. Il suffit de mettre la classe sur la balise P, vous n'avez pas besoin d'un div supplémentaire.

.field_wrapper 
    { 
    clear:both; 
    } 

    .field_label 
    { 
    float:left; 
    width:40%; 
    } 
    .field_input 
    { 
    float:left; 
    width:40%; 
    } 
    .field_error 
    { 
    clear: both; 
    color:#f00; 
    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" /> 
      <p class="field_error">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> 
    <div class="form_submit"> 
     <input type="submit" value="Add" name="submit" /> 
    </div> 
</form> 

Answer 2

Supprimer float: right de « field_error »

Answer 3

laissez-moi vous dire une chose d'abord. Si vous avez du contenu flottant dans un conteneur, le conteneur ne le contient jamais jusqu'à ce que vous ayez défini la propriété de dépassement de conteneur sur hidden ou que vous l'ayez fait flotter. comme

.field_wrapper 
{ 
clear:both; 
overflow:hidden; 
} 

Maintenant, il contient tous les éléments flottants. Maintenant, pour votre erreur div comme vous êtes en train de flotter des éléments à gauche, alors soyez clair: à gauche seulement et ça va marcher.

Merci