Hallo SD'ers. Ik ben mijn eerste layout aan het basen en zoals verwacht stuit ik na niet al te lange tijd op een probleem waar ik geen oplossing voor weet. Ik wil in de '#container_2', een script automatisch '#product' aan laten maken, maar deze komen onder elkaar terecht. Ik wil er drie naast elkaar gemaakt hebben, om vervolgens op een nieuwe regel verder te gaan. Ik heb twee stukjes code geplaatst om het duidelijker te maken. Kan iemand mij helpen?

Stukje uit het CSS-bestand:

Code:

#container_2 {
    margin: auto;
    position: relative;
    background-color: #414141;
    height: 600px;
    width: 724px;
    top: 2px;
    padding-top: 4px;
    padding-left: 3px;
    float: left;
}

#product {
    position: relative;
    background-image:url(images/product_achtergrond.gif);
    height: 142px;
    width: 230px;
    padding: 4px;
    line-height: 21px;
    clear: both;
}

Stukje uit de HTML-code:

Code:

        <div id="container_2">
    
           <div id="product">
                <span class="titel" style="float:left;">'.$fetch['titel'].'</span>
                <a href="#"><img class="thumbnail" src="'.$fetch['thumbnail'].'" alt="'.$fetch['titel'].'"/></a>
                  <span class="prijs">&euro;'.$fetch['prijs'].'!</span> - <a href="#" class="product_tekst">Meer informatie</a>
           </div>

           <div id="product">
                <span class="titel" style="float:left;">'.$fetch['titel'].'</span>
                <a href="#"><img class="thumbnail" src="'.$fetch['thumbnail'].'" alt="'.$fetch['titel'].'"/></a>
                  <span class="prijs">&euro;'.$fetch['prijs'].'!</span> - <a href="#" class="product_tekst">Meer informatie</a>
           </div>

        </div>

Aanvullend bericht:
Probleem is inmiddels opgelost.

Hallo,

Volgens mij moet je gewoon clear: both; er uit gooien. Dat zorgt er namelijk voor dat rechts en links vrijgehouden wordt, en dat is precies het tegenovergestelde van wat jij wilt dacht ik of niet?

nog een tip omdat je je div product 2 keer, misschien meer, wil gaan gebruiken verander het ID in een SPAN dus je kan zeggen <div span="product"></div> en dan moet je in je css zetteN: .product ipv #product

dubbele id's gebruiken is niet xhtml valid

Beiden bedankt voor de tips. Ik heb toch besloten om de layout door iemand anders te laten basen, omdat ik zelf nog niet overde basingkwaliteiten beschik die ik vereist acht voor deze website. ;)