1. [CSS] Probleem met float/clear

Re: [CSS] Probleem met float/clear

Hoi 8)

Ik heb een probleempje met het positioneren van <div>'s via de css-properties float en clear. Ik probeer een pagina te maken waar met 2 classes rijen van 2 elementen gemaakt te kunnen worden, op deze manier:

+-+-+ |1|2| +-+-+ |1|2| +-+-+
etc

Waarbij de vierkantjes een <div> voorstellen en de nummers 1 en 2 de classes "reactie1" en "reactie2". Het geheel staat in een <div> met als class "reacties". Ik heb deze classes als volgt ingesteld:

&#46;reactie1 &#123; border&#58; 1px solid #000000; width&#58; 25%; height&#58; 150px; float&#58; left; &#125;
&#46;reactie2 &#123; border&#58; 1px solid #FF0000; width&#58; 25%; height&#58; 150px; clear&#58; left; /* ook met &quot;right&quot; werkt dit niet */ &#125;
&#46;reacties &#123; border&#58; 0px solid #00FF00; clear&#58; both; /* onder alle andere content */ width&#58; 100%; &#125;

Het probleem is dat het niet werkt :). Als ik dit zo doe komen reactie1 en reactie2 onder in plaats van naast elkaar te staan, en de volgende reactie1 zelfs bovenop reactie2. De tweede reactie2 komt dan weer onder het geheel te staan. Weet iemand waar het probleem zit?
  • Hoi 8)

    Ik heb een probleempje met het positioneren van <div>'s via de css-properties float en clear. Ik probeer een pagina te maken waar met 2 classes rijen van 2 elementen gemaakt te kunnen worden, op deze manier:

    +-+-+ |1|2| +-+-+ |1|2| +-+-+
    etc

    Waarbij de vierkantjes een <div> voorstellen en de nummers 1 en 2 de classes "reactie1" en "reactie2". Het geheel staat in een <div> met als class "reacties". Ik heb deze classes als volgt ingesteld:

    &#46;reactie1 &#123; border&#58; 1px solid #000000; width&#58; 25%; height&#58; 150px; float&#58; left; &#125;
    &#46;reactie2 &#123; border&#58; 1px solid #FF0000; width&#58; 25%; height&#58; 150px; clear&#58; left; /* ook met &quot;right&quot; werkt dit niet */ &#125;
    &#46;reacties &#123; border&#58; 0px solid #00FF00; clear&#58; both; /* onder alle andere content */ width&#58; 100%; &#125;

    Het probleem is dat het niet werkt :). Als ik dit zo doe komen reactie1 en reactie2 onder in plaats van naast elkaar te staan, en de volgende reactie1 zelfs bovenop reactie2. De tweede reactie2 komt dan weer onder het geheel te staan. Weet iemand waar het probleem zit?

Plaats reactie

Wanneer je een reactie plaatst ga je akoord
met onze voorwaarden voor reacties.

Log in om te reageren