Comment fixer IE7 combinaison de flotteur clair

Question

J'ai une classe field_wrapper div qui contient 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 je réalisé ceci, Mon problème est son ne fonctionne pas dans IE7. nettoyons les appliquer à la field_error ne fonctionne pas.

Même après googler pendant longtemps je ne peux pas trouver une méthode appropriée pour résoudre ce problème sans ajouter le code HTML majoration. 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 voulez pas retirer le flotteur gauche. 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 fonctionne pour moi chaque fois (IE6 ainsi)

Mise à jour:

Je regardais ce nouveau et changé le balisage un peu, aussi fait xhtml valide. Il suffit de mettre la classe sur l'étiquette P, vous ne 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 tout d'abord. si vous ayant un contenu flottant dans un récipient le récipient contient jamais jusqu'à ce et à moins que vous définissez la propriété de débordement de conteneur caché ou faire aussi vous flotter. comme

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

Maintenant, il contient tout élément flottant. Maintenant, pour votre div d'erreur que vous vous flottez éléments à gauche, alors assurez-vous clairement:. Gauche seulement et cela fonctionnera

Merci