Mise en page CSS sur deux colonnes à deux dimensions

Question

Je suis en train de retravailler une mise en page utilisant actuellement des tables pour un plan à deux colonnes et j'ai rencontré des problèmes.

<div id="frame"> 

<div id="leftcol"> 
    <div id="1">blah</div> 
</div> 

<div id="leftcol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
</div> 

</div> 

#leftCol 
{ 
margin-right: 10px; 
width: 49%; 
float: left; 
} 

#rightCol 
{ 
width: 49%; 
float: left; 
} 

Au départ, j'avait une table à deux colonnes avec width=100% - cela a fonctionné parfaitement dans Firefox, mais dans IE la table débordait le conteneur #frame div. J'ai supprimé cette table et ajouté deux divs flottants, mais j'ai toujours des problèmes pour que les colonnes soient égales.

Tout mon contenu se trouve à l'intérieur du div #frame, qui a des contraintes de hauteur ainsi qu'un remplissage et une marge (je l'utilise pour laisser une "gouttière" autour du bord de la page).

J'ai besoin que les deux colonnes DIV flottantes soient de la même largeur et s'assoient l'une à côté de l'autre avec une gouttière de 10px (ish) entre elles. J'ai essayé de faire les deux width: 50%, mais cela échoue parce que le conteneur dans lequel ils sont (#frame) est plus petit dans le sens de la largeur que le corps entier de la page. (Si je me débarrasse du rembourrage de la gouttière, cela fonctionne en FF mais pas en IE.)

Faire chaque largeur de colonne: 49% fonctionne, mais semble moche que la taille change entre les navigateurs et la colonne de droite ne s'aligne pas J'ai essayé de faire cela avant mais finalement retourné aux tables 9since qu'il semblait fonctionner), mais maintenant que je vois qu'il est incompatible avec IE, je travaille depuis des heures pour trouver un solution css cross-browser. Des idées?

Answer 1

Je pense que vous pourriez bénéficier d'un framework css comme 960gs ou blueprint css il permet un placement de grille absolu et est compatible avec tous les navigateurs.

http://www.blueprintcss.org/

http://960.gs/

Answer 2

Réglage chaque colonne à 50% devrait fonctionner, si vous assurez-vous qu'ils n'ont pas de marges ou rembourrages.

Si elles ont besoin de rembourrage, placez un div supplémentaire, qui peut avoir autant de marge de rembourrage que nécessaire.

Pour la gouttière située entre les deux, vous pourriez donner à ces divs wraps une bordure sur le côté gauche/droit pour lui donner l'apparence d'un espace entre les colonnes. La publication d'un exemple de code complet (sur jsbin.com par exemple) nous aiderait également à comprendre votre problème plus facilement. :)

Answer 3

Si vous connaissez la largeur du cadre, vous pouvez do this

#frame { 
    background-color: green; 
    width: 500px; 
    overflow: auto; 
} 

#leftCol 
{ 
    width: 245px; 
    float: left; 
    background-color: red; 
} 

#rightCol 
{ 
    width: 245px; 
    float: right; 
    background-color: blue; 
} 

<div id="frame"> 

    <div id="leftCol"> 
    <div id="1">blah</div> 
    </div> 

    <div id="rightCol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
    </div> 

</div> 

Sinon, un ajouter un div supplémentaire et do this

<div id="frame"> 

    <div id="leftCol"> 
    <div id="hack"> 
     <div id="1">blah</div> 
    </div> 
    </div> 

    <div id="rightCol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
    </div> 

</div> 

#frame { 
    background-color: green; 
    width: 500px; 
    overflow: auto; 
} 

#leftCol 
{ 
    width: 50%; 
    float: left; 
} 

#hack { 
    margin-right: 10px; 
    background-color: red; 
} 

#rightCol 
{ 
    width: 50%; 
    float: right; 
    background-color: blue; 
} 

Answer 4

Ok voilà. C'est comment cela peut être réalisé.

CSS

#leftCol, #rightCol{ 
    width: 48%; 
    float: left; 
    background: red; 
    box-sizing: border-box; 
} 

#leftCol{ 
    margin-right: 1%; 
} 

#rightCol{ 
    margin-left: 1%; 
} 

HTML

<div id="frame"> 

    <div id="leftcol"> 
     <div id="1">blah</div> 
    </div> 

    <div id="rightCol"> 
     <div id="2">blah</div> 
     <div id="3">blah</div> 
    </div> 

</div> 

Si vous avez besoin ici est le préfixe de fournisseur pour box-sizing.

-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 

Notez que vous avez faute de frappe dans votre code HTML wher à la fois div sont appelés #leftCol. Il n'y a pas de #rightCol.