28172 sujets

CSS et mise en forme, CSS3

Quelle méthode choisissez vous pour 2 colonnes côte à côte ?

Bonjour,
quelle de ces 2 solutions est la plus utile pour aligner 2 bloc côte à côte avec un footer en dessous ?

La méthode que je choisi en général est celle déjà vu dans les astuces alsacréations.
Si je me souvient bien, c'est :

Première méthode
#content { /* Bloc à gauche */
width:450px;
float:left;
}
#sidebar { /* Bloc à droite */
width:180px;
margin-left:500px;
}
#footer { /* Bloc nécessitant un clearing & overflow:hidden */
clear:both;
overflow:hidden;
etc...
}

Seconde méthode
J'ai consulté le fichier de http://www.freecsstemplates.org/previews/conjuction/
#content {
width: 620px;
float: left;
}
#sidebar {
float: right;
width: 280px;
}
Ce dernier nécessite un bloc DIV vide & clear:both juste avant le footer
<div style="clear: both;">&nbsp;</div>


Y a t il une raison particulière d'opter pour une méthode plutôt qu'une autre ?
Merci.
Modifié par Torifan (27 Apr 2010 - 13:16)
Mais la seule différence entre tes deux méthodes c'est que les colonnes seront de la meme taille avec la premiere méthode!
En fait, la première technique se base sur le fait que la largeur du bloc et du menu sont fixes, alors que l'autre non.
Modifié par phpdoesnotcare (27 Apr 2010 - 14:43)
Dans ce cas précis, oui. Mais le fait d'utiliser uniquement des blocs flottants, ou jouer avec la marge d'un des blocs va donner quelque chose de différent sur des designes liquides.
Bonjour,

Je vient de tomber sur ce topic, et je me demande a quoi peut servir le "overflow:hidden" dans ce cas là ?

Merci bcp
José
Infodivio a écrit :
Mais la seule différence entre tes deux méthodes c'est que les colonnes seront de la meme taille avec la premiere méthode!

Non.
phpdoesnotcare a écrit :
En fait, la première technique se base sur le fait que la largeur du bloc et du menu sont fixes, alors que l'autre non.

Non plus.

La différence entre les deux méthodes c'est que dans la première on a un seul élément flottant, et dans la deuxième on en a deux. Dans les deux cas on a un risque de dépassement des flottants (ou du flottant), qu'il faudra contenir avec un clear:both sur un élément qui suit ou un élément rajouté, ou un overflow:hidden sur un conteneur, ou autre technique habituelle pour bloquer le dépassement des flottants.

La première méthode permet de définir la largeur de l'élément flottant mais pas celle du deuxième élément, dont la largeur peut alors s'adapter à la largeur du conteneur ou de la fenêtre. Autrement c'est kif-kif.

Autres remarques:
- le overflow:hidden sur le footer est inutile dans le premier exemple;
- l'ajout d'un élément vide avec clear:both n'est pas nécessaire dans la deuxième méthode si justement on a déjà un footer en clear:both (comme relevé par pfoofen).

jose a écrit :
a quoi peut servir le "overflow:hidden" dans ce cas là ?

À rien, en fait. Smiley smile

Dans l'absolu on peut utiliser overflow:hidden sur un conteneur pour créer un contexte de formatage, ce qui va empêcher le dépassement des flottants (et aussi bloquer la fusion des marges).

Pour compléter sur ces deux méthodes on peut aussi lire ce tutoriel qui présente pas mal de concepts (la méthode 1 de ce sujet + une méthode différente encore): Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Sujet clos
Aller à