WordPress : Comment faire des colonnes CSS dans un div ?

Je suis en train de prototyper un modèle WordPress et j’essaie de placer les mêmes éléments sur le headercomme ceci : http://dl.dropbox.com/u/768097/about.pdf

Voici les fichiers HTML et CSS : http://acreedy.oliveandpickle.com/

J’ai besoin de 4 colonnes dans le headeret tout doit être placé sous les images.

Solution n°1 trouvée

Flottant à gauche résoudra très certainement votre problème, mais gardez à l’esprit que chaque fois que vous ajoutez un rembourrage ou une marge à votre élément flottant, vous devrez également ajuster votre largeur. J’ai consulté votre page et vous n’avez pas compensé ce changement. Fixez la largeur en conséquence et vous devriez être prêt à partir 😀

~Chris

Tweets by theCSSguru

Solution n°2 trouvée

HTML :

<div id="header">

  <h1>Alan Creedy</h1>

    <ul id="quickInfo">
      <li class="mission">Mission Statement</li>
        <li>Helping People Think for Themselves</li>
        <li>1.919.926.0688</li>
        <li><a href="#contact">Email Me</a></li>
    </ul>

    <ul id="menu">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#BestPracticeIdeas">Best Practice Ideas</a></li>
        <li><a href="#ManagementTools">Management Tools</a></li>
        <li><a href="#Preneed">Preneed</a></li>
        <li><a href="#CaseStudies">Case Studies</a></li>
        <li><a href="#RecommendedResources">Recommended Resources</a></li>
        <li><a href="#ThinkTankForum">Think Tank Forum</a></li>    
    </ul>

</div>

CSS :

#header {
  border-bottom:3px solid #1582AB;
  height:200px;
  margin:0 auto;
  padding:46px 0 0;
  width:1000px;
  position:relative;
}
#header h1 {
  background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
  font-size:40px;
  height:140px;
  padding:8px 0 0 215px;
  margin:0;
}
#quickInfo {
  position:absolute;
  right:10px;
  top:10px;
  width:400px;
}
#quickInfo li {
  list-style-type:none;
}
.mission {
  font-size:18px;
}
#menu {
  margin:0 auto;
  padding:0;
  width:1000px;
}

Solution n°3 trouvée

Si vous utilisez html5, vous pouvez utiliser des éléments de côté ou de section au lieu de div.

<style>
    .column {
             float: left;
             width: 200px;}
</style>

<aside class="column">
  Column1
</aside>
<section class="column">
  Column2
</section>
<section class="column">
  Column3
</section>
<section class="column">
  Column4
</section>