Beste Leden,

Ik heb een probleem met de CSS.
Ik wil graag in de container "content' 3 blokken naast elkaar hebben mijn html/css zit er zo uit:

PHP Code:

   <ul class="blok1">         
    <li>Exalto</li>       
    <li>Oxibis</li>      
    <li>Mexx</li>      
    <li>Beausoleil</li>    
    <li>Ray Ban</li>     
    <li>Yves Cogan</li>   
    <li>Flair</li>   
   </ul>      
 
 
 
    <ul class="blok2">   
     <li>Esprit</li>
     <li>MarcO'polo</li> 
     <li>OWP</li>
     <li>Strellson</li>
     <li>Nike</li>
     <li>Calvin Klein</li>
     <li>Dilem</li>
     <li>Vogue</li>
    </ul>
 
 
 
     <ul class="blok3">
      <li>Cazal</li>
      <li>Gerry Weber</li>
      <li>Strenesse</li>
      <li>Versace</li>
      <li>Puma</li>
      <li>Fleye</li>
     </ul> 


CSS

PHP Code:

ul.blok2 {
    float:center;
 
}
 
ul.blok3 {
    float:right;
} 


Wat doe ik fout?

Ik dacht er eerst aan om de blokken een padding mee te geven, maar helaas zie ik hier ook geen resultaat van.

Geef je blok 1 en 2 een float left

Geef alle drie blokken een float left en een width, dan moet het goed gaan.

Ik dacht al ik moet dicht bij de oplossing zijn.

Bedankt heren.

En een float center kan niet gebruikt worden, alleen rechts en links!

Oke, duidelijk.

Nog een klein CSS probleempje:

PHP Code:

/* rechter kolom */
div#column_right{
                position: relative;
                float: left;
                width: 310px;
                height: 459px;
                background: #edf7fc;
}
 
/* text homepage rechterkolom */
div#column_right_text{
                position: relative;
                padding-top: 5px;
                padding-left: 10px;
                padding-right: 10px;
                height: 162px;
}
 
div#column_right_text_homepage{
                position: relative;
                padding-top: 5px;
                padding-left: 15px;
                padding-right: 10px;
                height: 297px;
} 


Ik heb dus in het block rechts een paragraaf staan. Als ik de padding-top hiervan wil aanpassen schuift het blok mee en schuift het blok daaronder uit de layout.

Ik dacht zelf aan display:block; maar dit heeft geen effect.

Ik denk dat als je 5px top padding geeft en je 5px van de height afhaalt het wel goed zal gaan. Op die manier blijft de hoogte uiteindelijk hetzelfde.

Vergeet overigens niet bij floatende elementen met variabele height een clear: both; toe te passen. Dit kan alsvolgt;

Code:

<footer>
    <aside>Column</aside>
    <aside>Column</aside>
    <aside>Column</aside>

    <div class="clear"> </div>
</footer>

footer aside {
    float: left;
}
clear {
    clear: both;
}

Dit zal hoogstwaarschijnlijk je bovenstaande probleem oplossen (dien je wel de fixed heights te verwijderen).