28172 sujets

CSS et mise en forme, CSS3

Diviser mon contenu sur 3 colonnes[RESOLU]

Bonjour à tous et merci pour vos reponses d'avance.

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.

Smiley url http://liveplayaz.com/testcss/[/url]

je post le css ici 

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;
}


et le html 

<!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>

J'aimerais que les texts restent dans leur colonne respective et que les colonnes puissent s'étirer en hauteur si necessaire.

Merci encore pour vos reponses.
Modifié par damaskinos (10 Feb 2009 - 22:59)
Ok j'ai utilise ton generateur mais sa ne regle pas vraiment mon probleme. Aurais-tu un conseil? sur mon code.

Merci d'avance
Sujet clos
Aller à