mise en page div colonne

Question

Salut Im essayant de créer la structure suivante en div, mais j'ai juste besoin d'aide pour commencer avec le CSS.

La largeur doit être 100%

Answer 1

<style type="text/css"> 
.clear{ clear: both; } 
.top{ width: 100%; } 
.col{ width: 25%; float: left; } 
.col, .top{ text-align: center; } 
</style> 
<div class="main"> 
    <div class="top clear">Menu</div> 
    <div class="col">Column1</div> 
    <div class="col">Column2</div> 
    <div class="col">Column3</div> 
    <div class="col">Column4</div> 
    <div class="clear"></div> 
</div> 

Cela ne fonctionnera pas si vous ajoutez la frontière/padding/marge aux colonnes, utilisez des valeurs de largeur de Absolue si vous voulez utiliser.

Answer 2

Si vous souhaitez que quatre colonnes flottantes remplissent 100% de la largeur d'un élément, vous pouvez constater un léger désalignement à la fin de la dernière colonne dans divers navigateurs. Il est plus facile d'obtenir exact alignement (par exemple, avec des frontières) si vous travaillez à la largeur d'un conteneur. Par exemple, pour reproduire votre visuel (complet avec les frontières), utilisez le code CSS:

#container { 
    width: 400px; 
    text-align: center; 
    } 
    #menu {border: 1px solid black;} 
    #cols div { 
    float:left; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    width:99px; 
    } 
    #cols div:first-child { 
    border-left: 1px solid black; 
    width:98px; 

Avec le code html:

<div id="container"> 
    <div id="menu">Menu</div> 
    <div id="cols"> 
     <div>column 1</div> 
     <div>column 2</div> 
     <div>column 3</div> 
     <div>column 4</div> 
    </div> 
    </div> 

Et (comme Lekensteyn suggère) assurez-vous que tout pied de page ou d'un élément après les colonnes div a une règle clear.

Answer 3

Vous pouvez tester ces exemples ici:

http://cssdesk.com/