Mise en page utilisant principalement Floats - le div central s'étend avec le contenu mais est maintenant caché sous le reste de la page

Question

J'ai une mise en page de site qui utilise des flottants pour atteindre les colonnes/lignes désirées.

Sur la page principale, le contenu principal div a une hauteur minimale de 200px, ce qui est parfait pour le contenu de cette page. Cependant, les pages après la page d'accueil exigent que le contenu de cette div soit considérablement plus long. Cela fonctionne bien dans Firefox, mais pas tellement dans IE - où le div s'étend mais il s'étend juste en dessous des divs qui sont en dessous.

Liens vers des captures d'écran sont ici:

http://i35.tinypic.com/289zpky.jpg - Internet Explorer par exemple:

Comme vous pouvez le voir ci-dessus, dans IE cela ne fonctionne pas du tout. cela fonctionne bien dans Firefox cependant.

<div class="homebox-pages"> 

    <h1>Transaction Details<br /> 
    </h1> 
    <p>What type of quote would you like?</p> 
    <select name="Quote-Type"> 
     <option>Sale</option> 
     <option>Purchase</option> 
     <option>Hip</option> 
     <option>Sale and Hip</option> 
     <option>Sale, Purchase and Hip</option> 
    </select> 
    <p>Sale Property Value: £<br /> 
    <input name="Sale Property Value" type="text" value="&pound;" size="30"/></p> 
    <p>Do you require a HIP? 
    <input name="Do you require a HIP?" type="checkbox" value="" /></p> 
    <p>HIP Property Value: £<br /> 
    <input name="Purchase Property Value" type="text" value="&pound;" size="30"/></p> 
    <p>Tenure Type:</p>       
    <strong>Freehold</strong><input name="Tenure Type" type="radio" value="Freehold" checked="checked" /> 
    <strong>Leasehold</strong><input name="Tenure Type" type="radio" value="Leasehold" /> 
    <strong>Unknown</strong><input name="Tenure Type" type="radio" value="Unknown" /> 
    <p>Is the property Registered?</p> 
    <strong>Registered</strong><input name="Registered" type="radio" value="Registered" checked="checked" /> 
    <strong>Unregistered</strong><input name="Registered" type="radio" value="Unregistered" /> 
    <strong>Unknown</strong><input name="Registered" type="radio" value="Unknown" /> 
    <p>Email Address:*<br /> 
    <input name="E-Mail Address" type="text" size="30" class="txtarea required" /></p> 
    <p>Mobile Number:<br /> 
    <input name="Mobile Number" type="text" size="30" /></p> 
    <p>Where did you hear about us?:*<br /> 
    <select name="Where did you hear about us?"> 
    <option value="Google">Google</option> 
    <option value="Word of Mouth">Word of Mouth</option> 
    <option value="Previous Customer">Previous Customer</option> 
    <option value="Yell">Yell</option> 
    </select> 
    <br /> 
    <br /> 
    <input name="Submit" type="submit" /> 

</div> 

Et le CSS pour Homebox est:

.homebox-pages 
{ 
    background-color:#39C; 
    background-position:center; 
    background-repeat:no-repeat; 
    min-height:200px; 
    width:70%; 
    float:left; 
    overflow:visible; 
    clear:both; 
} 

Answer 1

Vous pouvez essayer d'ajouter la classe clearfix à votre bloc principal. Il est défini ici: http://www.webtoolkit.info/css-clearfix.html

Il aide les navigateurs à rendre le conteneur entier, même lorsque son contenu est flottant.