J'essaie d'obtenir deux boîtes côte à côte à prendre toute la largeur de l'écran. Cependant, lors du réglage de la largeur à 50%, chacune des boîtes veut s'étendre environ 10px plus large que 50%. Qu'est-ce que je fais mal? .
.
. P> <div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
5 Réponses :
Les deux parties ont besoin d'être flottés et assurez-vous que vous utilisez dimensionnement de la boîte: bordure; pour vous assurer que la largeur est de 50%, peu importe le remplissage et la taille de la bordure.
Super ... mais pas tout à fait là-bas. Maintenant, les deux boîtes sont statiques à 50% chacune, mais la boîte droite est toujours en dessous de la boîte de gauche, pas directement à droite de la boîte de gauche. Idées? Merci.
@ Arewk peut-être à cause de cela: Margin-gauche: 50%; ? Je voudrais supprimer toutes les marges des deux boîtes
PARFAIT! MERCI À VOUS DEUX!
Vous ne devez pas besoin em> pour utiliser float (en fait, ce n'est pas vraiment le bon outil pour la mise en page globale du document; c'est plus pour briser du texte avec des images sans détruire le flux de documents). Vous pouvez y parvenir avec moins de CSS à l'aide de p> Affichage: Inline-Block; Code> et commentant l'espace blanc entre votre gauche et droite code> s. jsfiddle p>
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div><!--
--><div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
Je pense que les gens sont accro aux flotteurs lol. Je les déteste personnellement lorsque vous avez absolument besoin ... Ils finissent généralement par perdre tout et vous devez litiser votre balisage avec toutes sortes de correctifs clairs. +1 pour ne pas avoir besoin de flotteurs!
Je me rends compte que votre question a déjà été résolue, mais une autre option à la solution de Tylerh serait d'utiliser Flex. Comme:
p>
<div id="sides">
<div class="side" id="left">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="side" id="right">
<h1>text</h1>
<h2>text</h2>
</div>
</div>Flex est une bonne solution, mais nécessite des navigateurs plus modernes. Faites une note de cela et je vais donner +1.
Ah ouais, aurait dû mentionner ça! Bon crier. +1
Utiliser Affichage: Inline-Blockadd Taille de police: 0 au parent div, cela doit faire. Essayez également d'ajouter vertical-align: haut à droite div
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>