Aligner deux divs côte à côte
J'ai un petit problème. J'essaie d'aligner deux divs côte à côte en utilisant CSS, cependant, je voudrais que la div centrale soit positionnée horizontalement au centre de la page, j'ai réalisé ceci en utilisant:
#page-wrap { margin 0 auto; }
Ça a bien marché. La deuxième div que je voudrais positionnée sur le côté gauche de l'enveloppe de la page centrale, mais je ne peux pas réussir à le faire en utilisant des flotteurs bien que je sois sûr que c'est possible.
Je voudrais pousser la div rouge à côté de la div blanche.
Voici mon courant CSS concernant ces deux divs, la barre latérale étant la div rouge et la page-wrap étant la div blanche:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
6 réponses
Si vous avez enveloppé vos divs, comme ceci:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
Vous pouvez utiliser ce style:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
C'est un look légèrement différent, donc je ne suis pas sûr que ce soit ce que vous recherchez. Cela centrerait tout 800px en tant qu'Unité, pas le 600px centré avec le 200px sur le côté gauche. L'approche de base est que votre barre latérale flotte à gauche, mais à l'intérieur de la div principale, et le #page-wrap a la largeur de votre barre latérale car il est à gauche pour se déplacer aussi loin.
Mise à jour basée sur les commentaires: Pour ce look décentré, vous pouvez faire ceci:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
, Avec ce style:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
Je ne comprends pas pourquoi Nick utilise {[1] } au lieu de flotter l'autre div vers le left ou right, je viens de modifier son balisage, vous pouvez utiliser float pour les deux éléments au lieu d'utiliser margin-left.
Démo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
En outre, j'ai utilisé .clear:after qui appelle l'élément parent, juste pour effacer le parent.
Cela peut être fait par la propriété Style.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Son Résultat sera :
Profitez... Remarque: cela fonctionne dans une version supérieure de CSS (>3.0).
Il est également possible de le faire sans le wrapper - div#main. Vous pouvez centrer la méthode # page-wrap en utilisant la méthode margin: 0 auto; puis utiliser la méthode left: - N; pour positionner la barre latérale #et ajouter la largeur de #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
Cependant, la barre latérale disparaîtrait au-delà de la fenêtre du navigateur si la fenêtre était plus petite que le contenu.
La deuxième réponse de Nick est la meilleure, car elle est également plus maintenable car vous n'avez pas besoin d'ajuster #sidebar si vous le souhaitez pour redimensionner #page-wrap.
La méthode la plus simple serait de les envelopper dans un container div et appliquer margin: 0 auto; pour le conteneur. Cela centrera à la fois les divs #page-wrap et #sidebar sur la page. Cependant, si vous voulez ce look décentré, vous pouvez alors déplacer le container 200px à gauche, pour tenir compte de la largeur du #sidebar div.
Le code HTML est pour trois div alignent côte à côte et peut être utilisé pour deux aussi par quelques changements
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Le CSS sera
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
CE code va travailler vers une mise en page réactive car il va redimensionner le
<div>
Selon la largeur de l'appareil. Même on peut faire taire n'importe qui
<div>
Comme
<!--<div id="third">third</div> -->
Et peut utiliser le repos deux pour deux
<div>
Côte à côte.