2 kolommen website
Ik ben al een tijd opzoek naar de beste oplossing voor het volgende.
Ik heb een website met 2 denkbeeldige kolommen, de 1ste kolom, #photo_content staat gefloat: left; vervolgens staat er #info_content er gefloat naast. (ook left).
Wat nu het probleem is, is wanneer de info_content langer wordt als 1 photo_content, dan gaat de volgende photo_content omlaag.
Is er nou een manier om dit zonder nog 2 divs voor kolommen te plaatsen, op te lossen?
Zodat de info_content niet meer afhankelijk wordt van de photo_content en anderzijds?
Om het wat te verduidelijken:
Code (php)
1
2
3
2
3
<div id="photo_content" style="float: left;"></div>
<div id="info_content" style="float: left;"></div>
<div id="photo_content" style="float: left;"></div>
<div id="info_content" style="float: left;"></div>
<div id="photo_content" style="float: left;"></div>
Dan in de tweede plaats, als je twee kolommen wilt is het niet verstandig om beide te laten floaten, Eigenlijk wil je een hoofdkolom hebben en een kolom aan de zijkant, die laat je dan zweven met een float. In jouw geval zou ik er denk ik voor kiezen om de info_content als hoofdkolom te nemen.
En in de derde plaats kan je de zwevende elementen een clear geven zodat ze onder elkaar komen en blijven. In dit geval een "clear: left", omdat ze aan de linker kant zweven en dus onder de vorige zwevende div moeten komen.
HTML en CSS worden dan:
Code (php)
1
2
3
2
3
<div class="photo_content">photo</div>
<div class="photo_content">photo</div>
<div id="info_content">info</div>
<div class="photo_content">photo</div>
<div id="info_content">info</div>
Code (php)
1
.photo_content{float:left; clear:left;}
Dus als ik het goed begrijp en bij mij is de photo_content de hoofdkolom en daarnaast aan de rechterkant staat info_content. Dan moet ik bij de info content de regel float: left en clear: left; toepassen? En zoals je aangaf als de infobox de hoodkolom is deze div photo_content de 2 regels css meegeven?