je propose a ceux qui ont des soucis de colonnes pour construire leur site un petit système css qui fonctionne sur le principe des grilles...
je vous laisse jeter un coup d'oeil...
le html
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="contenu">
<div>
<h1>3 colonnes 4 / 6 / 6</h1>
</div>
<div class="bloc">
<div class="span4">
<p>
Span 4
</p>
</div>
<div class="span6">
<p>Span 6</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
</div>
<div class="span6">
<p>Span 6</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
</div>
</div>
<hr />
</div>
<div class="contenu">
<div>
<h1>2 colonnes 4 / 12</h1>
</div>
<div class="bloc">
<div class="span4">
<p>
Span 4
</p>
</div>
<div class="span12">
<p>Span 12</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
</div>
</div>
<hr />
</div>
<div class="contenu">
<div>
<h1>2 colonnes 8 / 8</h1>
</div>
<div class="bloc">
<div class="span8">
<p>Span 8</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
</div>
<div class="span8">
<p>Span 8</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
</div>
</div>
<hr />
</div>
</body>
</html>
body {
background-color: #ffffff;
margin: 0;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
.contenu{
width: 940px;
margin-left: auto;
margin-right: auto;
}
.bloc {
margin-left: -20px;
}
.bloc > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span1 {
width: 40px;
}
.span2 {
width: 100px;
}
.span3 {
width: 160px;
}
.span4 {
width: 220px;
}
.span5 {
width: 280px;
}
.span6 {
width: 340px;
}
.span7 {
width: 400px;
}
.span8 {
width: 460px;
}
.span9 {
width: 520px;
}
.span10 {
width: 580px;
}
.span11 {
width: 640px;
}
.span12 {
width: 700px;
}
.span13 {
width: 760px;
}
.span14 {
width: 820px;
}
.span15 {
width: 880px;
}
.span16 {
width: 940px;
}
/* ATTENTION, pour utiliser les colonnes qui suivent, vous
devrez adapter la taille de votre div contenu en consequence...*/
.span17 {
width: 1000px;
}
.span18 {
width: 1060px;
}
.span19 {
width: 1120px;
}
.span20 {
width: 1180px;
}
.span21 {
width: 1240px;
}
.span22 {
width: 1300px;
}
.span23 {
width: 1360px;
}
.span24 {
width: 1420px;
}
