Hello!

Ik heb 2 divs:

[ linker div ] [ rechter div ]

Die heb ik naast elkaar staan..

Links is 60%, rechts is 30%..

Nu heb ik ze beide dezelfde achtergrond kleur gegeven, rood.

Maar nu het probleem; als de linker div, meer inhoud heeft dan de rechter div, trekt de rechter div niet mee naar beneden. Dit resulteert dus in:



Iemand een idee hoe dit recht te trekken? :)
Heey bas,

Ik weet niet of dit voor jou zal werken, maar bij heeft het wel gewerkt:


white-space: normal;


Plaats dat in je css
Werkt niet.. Maar dat is dan ook een text property?
klopt, dit is word-wrap.

Heb je misschien een stuk code, dat zou wat makkelijker werken :)

btw.

max-width wilt ook nog wel eens werken..

Edit;
Verkeerd gelezen, ik kan dit probleem, en ik denk dat je dit kan oplossen met een 3de overall div. Die dus die 2 div's in zich heeft:


<div id="overall_div">
<div id="left">
text text
</div>
<div id="right">
text text
</div>
</div>


Geef de div's left en right: height: 100%; mee. Dit zal het probleem moeten oplossen.
[google]faux columns[/google] probleem lijkt mij dit.
Zeker weten, kijk maar naar deze quote van A List Apart:
A-List-Apart
How do you get the right column&#8217;s background color to extend all the way down the page?

En dit is al heel vaak langs gekomen op phphulp...

Edit: Sinds wanneer kan die klere BBCode parser geen spatie's in namen aan :-/.
@Mr. DeJong, height van wat? Je kunt geen height 100% gebruiken.

@Karl, tnx.. alleen het kutte is, ik heb een scaleable websites.. 100% breed dus.. Dus moet ff uitvogelen hoe dat dan precies werkt met een background..

Ik snap dat als je een 500px links en 200px rechts hebt, dat je dan een afbeelding van 700px kunt maken.. Alleen gaat dat voor mij dus niet op :(
Bas Kreleger schreef op 01.11.2008 14:24
@Karl, tnx.. alleen het kutte is, ik heb een scaleable websites.. 100% breed dus.. Dus moet ff uitvogelen hoe dat dan precies werkt met een background..

[google]liquid faux columns[/google]
Dan doe je toch effe je soort d'r bij...
Gewoon googlen, je probleem is helemaal niet zo bijzonder.
Had 'm al gevonden idd, nice, tnx
Bas,

Je leest het misschien een beetje verkeerd even een grotere code:

Als je dus een box wilt hebben die max 500px groot is, en je wilt 2 kolommen hebben, en je wilt dat beide kolommen even groot zijn. Maar de hoeveel tekst niet uitmaakt, gaan we:

de html (zonder doctype):

<div id="overall_collomn">
    <div id="left_coll">
        Text hier
    </div>

    <div id="right_coll">
       Text hier
    </div>
</div>



De css:

#overall_collomn {
    height: 500px;
    width: 100%;
    background-color: #FF0000;
}

#left_coll {
    height: 100%;
    width: 60%;
    float: left;
    clear: left;
}

#right_coll {
    height: 100%;
    width: 30%;
    float: right;
    clear: right;
}


Dit is een vrij eenvoudige code, maar dit zorgt er wel voor dat alles rood is. Overigens is de height property in de left_coll en de right_coll niet zo belangrijk meer. Je kan dit best vervangen door: max-height: 500px;

Ik hoop dat dit je probleem oplost.

@Mr. de Jong,

Dat werkt toch niet? Als je content langer is dan 500px werkt het niet meer..
Dan haal je dat weer weg.
Of gebruik min-height.

Reageren