DIV flottant à droite apparaît au centre, tandis que le flottant gauche apparaît ci-dessous

Question

J'ai un contenu principal DIV avec une largeur de 960px, et deux éléments DIV flottant à l'intérieur. Voici une version simplifiée de celui-ci:

<div id='content'> 
    <div id='main_data'> 
     ....Data.... 
    </div> 
    <div id='sidebar'> 
     ....data.... 
    </div> 
</div> 

Et le CSS:

div#content { width: 960px; position: relative } 
div#main_data { float: right; width: 755px; } 
div#sidebar { float: left; width: 190px; padding: 4px } 

La DIV #main_data semble être centré dans #content et #sidebar semble flotter à gauche, mais au-dessous #main_data. #content n'a pas de marge définie ou de remplissage, et même en incluant le remplissage de 4px dans #sidebar, les largeurs des flotteurs ne dépassent pas 960px.

Cela semble très bien dans Firefox, IE8, Chrome, Safari et Opera - mais pas dans IE7 et IE6.

Je devrais ajouter que si je change de position dans le DOM, ils apparaissent correctement - j'essaie de rendre ce site plus accessible en mettant les informations les plus pertinentes dans #main_data plus près du haut du document (Wikipedia fait la même chose où la barre latérale gauche vient plus tard dans la source).

Answer 1

I "m pas tout à fait sûr de ce que vous essayez de le faire d'abord vous devriez faire que plus clair, mais je pense que ce que votre manque est un élément clair tel que <br style="clear:both;/'>

<div id='content'> 
    <div id='main_data'> 
     ....Data.... 
    </div> 
    <div id='sidebar'> 
     ....data.... 
    </div> 
    <br style='clear:both;'/> 
</div> 


#content { width: 960px; } 
#main_data { float: right; width: 755px; } 
#sidebar { float: left; width: 190px; padding: 4px } 

Answer 2

Intéressant, J'ai copié votre code exactement, ajouté des balises html racine et du texte Lorem Ipsum à la place de "... data ...", et j'ai vu exactement le résultat opposé: comportement attendu dans IE7, mais pas dans FF 3.5. La solution pour moi était de jouer avec les marges et les paddings des deux divs enfants jusqu'à ce que la mise en page paraisse correcte dans tous les navigateurs.En particulier, j'ai baissé le padding de la barre latérale à 3px, et définissez explicitement les marges des deux autres divs à 0px. Mais étant donné que mes premiers résultats étaient à l'opposé des vôtres, je suppose que cela pourrait être différent pour vous aussi.