Beste forumleden, ik loop even vast op een klein opmaakprobleempje.

Ik heb 2 divs naast elkaar dmv float: left.

De twee divs zitten in een container div om ze samen te houden.

De twee divs zijn niet beiden even groot en de inhoud van de tweede div (rechts) varieert.

Daarom wil ik dat de linker div onderaan blijft plakken zodat de afbeelding daar telkens aansluit bij de onderkant van de rechter div, maar ik krijg het technisch niet voor elkaar.

Iemand een tip? (nog beter zou zijn dat de linkerdiv altijd dezelfde hoogte heeft als de rechter div, maar dat lukt ook niet)

HTML

<div class="container">
<div class="links"></div>
<div class="rechts"></div>
</div>

CSS

.container {
width: 1200px;
background-color:black;
overflow: hidden;
}
.links {
width: 350px;
background-color:yellow;
float:left;
}
.rechts {
width: 850px;
background-color:purple;
float:left;

}

De div rechts geef je geen float="left" eigenschap, maar wel een linkermarge van 350 px (= breedte van de gele div).
Ik weet nu niet wat voor afbeelding je gebruikt, maar als het gewoon een achtergrondkleur moet zijn, zou ik de achtergrond van de container dezelfde maken als de gele div.

Dag Compuchrisje, Dank voor je hulp.
Het was inderdaad fout om de rechter div ook float left te geven, dat moets idd een marge zijn.

Maar het probleem blijft hetzelfde.
Ik zal even verduidelijken.

In de linker div (nu geel) komt een afbeelding van een boom, niet als achtergrond, maar gewoon als afbeelding.
Het is de bedoeling dat de wortels van de boom altijd onderaan blijven. Vandaar dat ik zou willen dat div links altijd dezelfde hoogte heeft als div rechts (die varieert van hoogte naargelang de inhoud). Op die manier kan ik aangeven dat div links de inhoud altijd aan de bodem houdt.

Maar het probleem is dus eigenlijk dat ik het niet voor mekaar krijg om die 2 divs gelijk te houden.

Is het een gestileerde afbeelding? Dan kan je wel wat eraan doen, misschien wel wat omslachtig.
Verdeel die afbeelding in 3 delen: de kruin, de stam en de wortels. Noteer nauwkeurig de afmetingen.
Verdeel nu de div in 3, die onder elkaar moeten komen. De eerste (bovenste) met de exacte afmetingen van de kruin, de derde (onderste) met de juiste maten van de wortel. De tweede div, waar de stam dus moet rekken of krimpen geef je geen hoogte.
Voor kruin en wortel laat je de afbeelding niet herhalen (no-repeat), maar wel voor de stam op de y-as.
'k Zou het zelf moeten proberen, maar we hebben onze kerstboom nog niet opgesteld :lol:

Apropos, de div zelf geen hoogte geven, anders geeft dat rare effecten.

Zet alles eens in één cel van een table ?

Dank voor de reacties.
Het lijkt dus niet zo eenvoudig te zijn.

@Spoorzoeker, tables wou ik vermijden, maar ik denk dat dat het meest eenvoudige wordt.

Dank om mee te denken, maar ik ga voor het gemak dus nog eens een table gebruiken voor opmaak.

Ik weet dat er mensen zijn die gruwen bij bepaalde programmeertechnieken, maar ik gebruik wat ik zélf makkelijk vind. Als een ander daar niet me kan leven, het zij zo.
Dus als jij tables (oneigenlijk) wilt gebruiken, gewoon doen !.

Als hij heel die afbeelding in 1 tabel (zonder formaat, gewoon de volledige vertikale ruimte), gaat die boom er vreselijk raar uitzien als de pagina langer wordt. Natuurlijk is mijn idee ook niet zo perfect, want een stam van een halve kilometer is nu ook geen zicht. Alles hangt er natuurlijk van af hoe lang de tekst/info-sectie gaat worden.
@Spoor: tabellen is inderdaad vrij makkelijk, maar de weergave in de diverse browsers kan nogal verschillen heb ik gemerkt. Met div's kan je meer spelen, je kan ook een layer aanmaken waarin je alles kan zetten wat je wil en die eender waar op de pagina zetten met de opgegeven coördinaten. Probleem is dan wel op welk beeldscherm het wordt weergegeven. Bij een mobieltje zal dat er niet zo mooi uitzien als in een weergave op breedbeeldscherm.