Aligner 2 colonnes de liens texte

Question

J'ai ce code dans mon bloc et j'aimerais avoir les deux colonnes gauche et droite. Maintenant, le 2 ème est sous la première colonne.

<style type="text/css"> 
    a img{border:none;} 
    #planninglaunchbox 
    { 
     background:#f3f8e7; 
     color:#1f1f1f; 
     font:normal 11px Arial,sans-serif; 
     margin:0 10px 10px 0; 
     overflow:hidden; 
     width:235px; 
    } 
     #planninglaunchbox .inner 
     { 
      padding:10px 0 10px 10px; 
     } 
     #planninglaunchbox a{color:#1f1f1f;text-decoration:none;} 
     #planninglaunchbox a:active, 
     #planninglaunchbox a:hover{text-decoration:underline;color:#579BC3;} 
     #planninglaunchbox h3 
     { 
      color:#1f1f1f; 
      font:normal 12px Georgia,serif; 
      margin:0 0 5px; 
      text-transform:lowercase; 
      width:215px; 
     } 
     #planninglaunchbox h4 
     { 
      font:bold 12px Arial,sans-serif; 
      margin:0 0 10px; 
     } 
     #planninglaunchbox ul 
     { 
      list-style:none; 
      margin:0 0 5px; 
      padding:0; 
     } 
      #planninglaunchbox ul.first{margin-right:10px;} 
      #planninglaunchbox ul.first, 
      #planninglaunchbox ul.last 

     { 
       float:left; 
      } 

      #planninglaunchbox ul li 
      { 
       background:none; 
       margin-bottom:5px; 
       padding:0; 
      } 
       #planninglaunchbox ul li img 
       { 
        margin-right:6px; 
        vertical-align:middle; 
       } 
     #planninglaunchbox .seeall 
     { 
      clear:both; 
      margin:0; 
      padding:0; 
      width:auto; 
     } 
</style> 
<div id="planninglaunchbox"> 
<div class="inner"> 
<h3> Theme</h3> 
<ul class="first"> 

!--Some links-- 

</ul> 




<ul class="last"> 

!--Some links-- 


</ul> 

</div> 
</div> 

Answer 1

Utilisez float:left pour les éléments que vous souhaitez placer côte à côte.

Answer 2

J'aime les listes. Ils ont aussi une signification sémantique.

<style> 
ul { 
    width:200px; 
} 

ul li { 
    width:100px; 
    float:left; 
} 
</style> 

<ul> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
</ul> 

Avec un peu d'espacement:

<style> 
    ul { 
     width:220px; 
    } 

    ul li { 
     width:100px; 
     float:left; 
     margin-left:10px 
    } 
    </style>