web-dev-qa-db-fra.com

Comment positionner deux divs horizontalement dans un autre div

Je n'ai pas joué avec CSS depuis trop longtemps et je n'ai pas de références pour le moment. Ma question devrait être assez facile mais googler ne fournit pas une réponse suffisante. Donc, en ajoutant à la connaissance collective ...

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

C'est ce que je veux que ma mise en page soit. La rubrique quand même. Je voulais que le sous-titre contienne les sous-gauches ET les sous-droites. Quelles règles css dois-je utiliser pour m'assurer qu'une div est liée par les attributs d'une autre div. Dans ce cas, comment puis-je m'assurer que les sous-gauche et sous-droite restent dans le sous-titre? 

csslayouthtml
56
Josh Smeaton

C'est une idée fausse assez commune que vous avez besoin d'un clear:both div au bas, quand vous n'avez pas vraiment. Bien que la réponse de foxy soit correcte, vous n'avez pas besoin de cette séparation non sémantique et inutile. Il suffit de coller un overflow:hidden sur le conteneur:

#sub-title { overflow:hidden; }
65
Darko Z

Lorsque vous flottez sub-left et sub-right, ils ne prennent plus d'espace dans sub-title. Vous devez ajouter un autre div avec style = "clear: both" sous ceux-ci pour développer le div qui les contient ou ils apparaissent en dessous.

HTML:

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS:

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}
36
foxy

Je suis d'accord avec Darko Z pour appliquer "overflow: hidden" à # sous-titre. Cependant, il convient de mentionner que la méthode de débordement: masqué pour effacer les flottants ne fonctionne pas avec IE6 à moins que vous n'ayez spécifié la largeur ou la hauteur. Ou, si vous ne souhaitez pas spécifier de largeur ou de hauteur, vous pouvez utiliser "zoom: 1":

#sub-title { overflow:hidden; zoom: 1; }
9
Justin Lucente

Cela devrait faire ce que vous recherchez:

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

Et vous pouvez contrôler tout le document avec la classe wrapper ou seulement les deux colonnes avec la classe secondaire.

9
csexton

Cette réponse ajoute aux solutions ci-dessus pour adresser votre dernière phrase qui se lit comme suit:

comment puis-je m'assurer que les sous-gauche et sous-droite restent dans le sous-titre

Le problème est que, à mesure que le contenu de la sous-gauche ou de la sous-droite se développe, il s'étendra sous le sous-titre. Ce comportement est conçu dans CSS mais pose des problèmes à la plupart d'entre nous. La solution la plus simple est d’avoir une div stylée avec la déclaration CSS Clear.

Pour ce faire, incluez une instruction CSS définissant un div de clôture (vous pouvez définir Effacer gauche ou RIght plutôt que les deux, en fonction des déclarations Float utilisées:

#sub_close {clear:both;}

Et le HTML devient:

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

Désolé, je viens de me rendre compte que cela a été posté précédemment, je n'aurais pas dû préparer cette tasse de café en tapant ma réponse!

@Darko Z: vous avez raison, la meilleure description du débordement: solution automatique (ou débordement: cachée) trouvée dans un message posté sur SitePoint il y a quelque temps Effacement simple de Floats et il y a aussi une bonne description dans un article 456bereastreet CSS Tips and Tricks Part-2 . Je dois admettre que je suis trop paresseux pour mettre en œuvre ces solutions moi-même, car le cludge de clôture fonctionne correctement même s'il est bien sûr très inélégant. Je vais donc faire un effort à partir de maintenant pour nettoyer mon acte.

5
James Piggot

Essayez sérieusement certains d'entre eux, vous pouvez choisir une largeur fixe ou des dispositions plus fluides, à vous de choisir! Vraiment facile à mettre en œuvre aussi.

IronMyers Layouts

plus plus plus

3
inspite

Vous pouvez également y parvenir en utilisant un framework CSS Grids, tel que YUI Grids ou Blue Print CSS . Ils résolvent beaucoup de problèmes de navigation dans plusieurs navigateurs et permettent une mise en forme plus sophistiquée des colonnes pour l'utilisation de simples mortels.

0
csexton

Meilleure et simple approche avec CSS3

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}
0
Konga Raju