28172 sujets

CSS et mise en forme, CSS3

[Réglé] 3 colonnes qui ne se séparent pas

Bonjour à toutes et à tous,

J'ai un petit problème concernant 3 colonnes de mon site. Les 2 premières sont collés et ne respectent pas l'espacement entre les 3 colonnes.

Voici le lien de test : URL de test

Voici également le fichier HTML et CSS :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> 
  <title>Titre</title>
  <link rel="stylesheet" media="screen" type="text/css" href="style.css">
</head>
<body>
<div id="head"></div>
<div id="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam arcu, faucibus vel blandit nec, blandit eget mi. Phasellus tempor dolor sit amet nisl pretium ullamcorper. Mauris ante dui, blandit rhoncus tempor varius, dictum ultrices metus. Donec eget dui nisi. Vivamus mi dolor, semper id egestas eget, congue non felis. Nullam ultrices euismod risus, et ullamcorper erat placerat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nisi erat, tempor non varius eu, faucibus in arcu. Maecenas rutrum, ante in commodo pellentesque, quam augue tincidunt orci, vitae ullamcorper libero enim id odio. In mattis libero metus, ut congue augue. In sodales diam pretium erat blandit non pretium justo blandit. Proin rutrum porta hendrerit. Vivamus adipiscing purus eu mauris auctor nec adipiscing justo accumsan. Suspendisse in mauris orci. Aliquam sed imperdiet quam. Quisque scelerisque accumsan nibh, sed condimentum ante volutpat sed. Curabitur porta, ligula eu eleifend consequat, tellus neque vulputate massa, id sodales nunc lectus et neque. Morbi cursus, nunc vel tincidunt vulputate, dolor quam venenatis nulla, id bibendum nibh metus vitae est.</div>
<div id="espace"></div>
<div id="tout"><img src="images/img.png"></div>
<div id="btb"><img src="images/img.png"></div>
<div id="mlg"><img src="images/img.png"></div>
</body>
</html>


body {
  width: 950px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  margin: auto;
  background-color:#222;
  }
#head {
  margin: auto;
  width: 950px;
  height: 120px;
  background-image: url("images/img1.png");
  margin-top: 30px;
  margin-bottom: 10px;
  }
#espace {
  margin: 10px;
  }
#block {
  padding:10px;
  text-align: justify;
  background:#FFF;
  }
#tout {
  float: left;
  padding:10px;
  width: 250px;
  height: 250px;
  background-color: #FFF;
  }
#mlg {
  padding: 10px;
  width: 250px;
  height: 250px;
  background-color: #FFF;
  overflow: hidden;
}
#btb {
  float: right;
  padding:10px;
  width: 250px;
  height: 250px;
  background-color: #FFF;
  }


Merci pour vos réponses. Bonne soirée.
Modifié par nova313 (26 Jan 2010 - 07:26)
nova313 a écrit :
Bonjour à toutes et à tous,

J'ai un petit problème concernant 3 colonnes de mon site. Les 2 premières sont collés et ne respectent pas l'espacement entre les 3 colonnes.

Merci pour vos réponses. Bonne soirée.

Bonsoir.
À première vue ils respectent tout et à 100%.
Si je comprends bien, tu voudrais que ton deuxieme bloc (#mlg) soit centré ?
Faudrait lui ajouter de la margin gauche.
#mlg { 
  margin-left:335px; /* <=== 335, plus ou bien moins ... */
  padding: 10px; 
  width: 250px;  
  height: 250px; 
  background-color: #FFF; 
  overflow: hidden;
 }
Un design fluide avec trois «colonnes», grâce au positionnement flottant
Modifié par Torifan (26 Jan 2010 - 01:33)
Heyoan a écrit :
Euh... de quel espacement veux-tu parler ?


Désolé de ne pas avoir était aussi précis.


Torifan a écrit :

Bonsoir.
À première vue ils respectent tout et à 100%.
Si je comprends bien, tu voudrais que ton deuxieme bloc (#mlg) soit centré ?
Faudrait lui ajouter de la margin gauche.
#mlg { 
  margin-left:335px; /* <=== 335, plus ou bien moins ... */
  padding: 10px; 
  width: 250px;  
  height: 250px; 
  background-color: #FFF; 
  overflow: hidden;
 }
Un design fluide avec trois «colonnes», grâce au positionnement flottant


C'est bon, ça marche. Merci beaucoup.
Sujet clos
Aller à