Mettre 2 divs side by side / Internet Explorer 6/7 flotteur et le rembourrage (?) bug fix

J'ai besoin de mettre 2 divs côté par côté. Mais ce qui est plus important, je veux que cela s'afficher correctement dans IE6/7. J'ai réussi à réussir ce avec Firefox si.
Mon code:

#container{
    padding:10px;
}

#left{
    float:left;
    width:500px;
}

#right{
    width: 300px;
    float:right;
    padding:7px;
    background-color:#F0FCEB;
}

<div id="box"> 
<div id="left">Some content here</div> 
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>

Les résultats sont comme indiqué ci-dessous:

De Sortie désiré (FF Sortie):
Mettre 2 divs side by side /Internet Explorer 6/7 flotteur et le rembourrage (?) bug fix

IE6/7 Sortie:
Mettre 2 divs side by side /Internet Explorer 6/7 flotteur et le rembourrage (?) bug fix
Comment puis-je me débarrasser de cette inutile rembourrage dans IE, ou est-il une autre méthode?
Remarque: j'utilise jQuery et Astucieux pour jQuery pour créer des coins arrondis.

  • Connaissant le HTML contenu de <div id="droite"> pourrait être utile. La capture d'écran le rend comme une différence de rembourrage sur la forme des éléments entre FF et IE.
  • Regardez: stackoverflow.com/questions/591539/...
InformationsquelleAutor turezky | 2009-04-15
  1. 5

    Un contenu ici 2

    Qu'est-ce que le contenu? Ton exemple fonctionne comme-est, donc c'est quelque chose dans le contenu lui-même qui provoque le problème.

    T-il peut-être inclure un formulaire, qu'il regarde comme sur la photo?

    <form> a un défaut d'en haut/bas de la marge, et de la façon verticale marges de l'effondrement est une question d'une certaine confusion et les différences de navigateurs (il est généralement préférable d'éviter si possible). Ainsi, le mini-réinitialiser la règle:

    form { margin: 0; }

    peut aider.

    • Fonctionne comme un charme!!! Merci beaucoup!
    InformationsquelleAutor bobince
  2. 1

    Ne pas utiliser un tableau! j'utilise souvent une liste non ordonnée pour les formes longues. mais ici les 2 divs peut travailler. Assurez-vous que l'accessibilité vous avez l'Ara: marqué comme un <label> et vous l'associer avec le champ de saisie

    assurez-vous que vous avez rétablir la valeur par défaut de rembourrage et de la marge pour les articles avant d'exprimer le vôtre.

    #box label, #box input {margin:0;padding:0;}
    • Étonnamment, cela a fonctionné parfaitement pour moi! Merci!
    InformationsquelleAutor nickmorss
  3. -3

    Utiliser un <table>, ils sont les meilleurs pour les side-by-side alignements dans mon expérience

    • Il était réellement <table>, mais avec toutes les tendances autour de tables à langer pour les divs j'ai pensé que je pourrais suivre la foule et commuté à tabless (comme l'un des balises pour la question implique) 🙂
    • Ce ne serait pas sémantiquement correct comme il n'y a pas de tableaux de données à afficher.
    • Pourquoi lutter contre le système? Les Tables sont les meilleurs quand il s'agit de côté par côté, l'alignement dans des pages web. Je sais que ça ne devrait pas être de cette façon, mais c'est juste la façon dont il est. Voir: stackoverflow.com/questions/591539/...
    InformationsquelleAutor Click Upvote