Je fais un site de news et j aimerais pouvoir diviser mon contenu en 3 colonnes. J'ai une image que j ai mis en background qui montre bien les 3 colonnes, j'arrive à bien définir les colonnes mais mon text deborde sur la colonne à sa droite.
http://liveplayaz.com/testcss/
je post le css ici
Code : Tout sélectionner
body{
font: 12px tahoma, arial, sans-serif;
background: url(../images/images_01.jpg) repeat-x;
text-align: left;
margin:0;
padding: 0;
top: auto
}
img {
border:none;
}
#container{
height:700px;
width: 990px;
margin: auto;
}
#header{
clear: both;
height:170px;
width:981px;
background:url(../images/images_03.jpg);
}
#menu li{
display:inline;
list-style-type: none;
vertical-align: bottom
}
#infoBar{
height:48px;
width:981px;
overflow:hidden;
background:url(../images/images_09.jpg);
}
#marq{
padding:1em .9em .5em .9em;
color:#5e6c8a;
text-align:left;
font-weight: bold;
}
#textMarq{
padding:1em .9em .5em .9em;
color:#5e6c8a;
text-align:left;
font-weight: bold;
}
#contenu{
min-height:756px;
text-align:left;
background:url(../images/images_07.jpg) no-repeat;
}
#colonne1{
float: left;
padding:1em 1em .5em 1em;
min-height:400px;
width:455px;
}
#cln1titre1{
background:url(../images/images_10.jpg) no-repeat;
height:44px;
width:364px;
}
#cln1corps1{
min-height:356px;
}
#cln1titre2{
background:url(../images/images_13.jpg) no-repeat;
height:45px;
width:364px;
}
#colonne2{
float:right;
min-height:400px;
width:260px;
padding:1em 0em .5em 1em;
}
#cln2titre1{
background:url(../images/images_12.jpg) no-repeat;
height:37px;
width:226px;
}
#cln2corps1{
min-height:356px;
}
#cln2titre2{
background:url(../images/images_16.jpg) no-repeat;
height:45px;
width:364px;
}
#colonne3{
overflow: hidden;
margin-right: 35px;
margin-top:0;
padding:1em 0em .5em 1em;
}
#cln3titre1{
background:url(../images/images_12.jpg) no-repeat;
height:37px;
width:226px;
}
#cln3corps1{
min-height:356px;
}
#cln3titre2{
background:url(../images/images_16.jpg) no-repeat;
height:34px;
width:225px;
}
#footer{
clear: both;
}Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Culture Gabon</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div id="menus">
<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div><!--end of menu-->
</div><!--end of header-->
<div id="infoBar">
<div id="marq"><marquee scrolldelay="160" onmouseover="this.stop();" onmouseout="this.start();"> Gabon : 165 milliards de francs CFA pour l’aménagement du réseau routier national
</marquee></div>
</div><!--end of infoBar-->
<div id="contenu">
<div id="colonne1">
<div id="cln1titre1">
</div>
<div id="cln1corps1">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>lire plus</p>
</div>
<div id="cln1pub">
</div>
<div id="cln1titre2">
</div>
<div id="cln1corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>lire plus</p>
</div>
</div><!--end of colonne1-->
<div id="colonne2">
<div id="cln2titre1">
</div>
<div id="cln2corps1">
<p>titre fkdjskfsdf</p>
<span>text kjflksdjflkdsajflasjdflkjdaflaslfadffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</span>
<p>lire plus</p>
</div>
<div id="cln2titre2">
</div>
<div id="cln2corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadfdgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
</div><!--end of colonne2-->
<div id="colonne3">
<div id="cln3titre1">
</div>
<div id="cln3corps1">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
<div id="cln3titre2">
</div>
<div id="cln3corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
</div><!--end of colonne3-->
</div><!--end of contenu-->
<div id="footer">
</div><!--end of footer-->
</div><!--end of container -->
</body>
</html>
Merci encore pour vos reponses.
