[CSS] Div's uitlijnen tot gelijke hoogte

[Verwijderd]

Ik ben bezig om mijn website om te bouwen van <table>'s naar <div>'s en ben een aardig eind op weg. Het probleem is dat ik 2 kolommen wil maken waarbij de hoogte van beide bepaald wordt door de content. Boven deze 2 kolommen staat nog een header, maar die geeft het probleem niet.

Nu wil ik de kortste kolom net zo lang maken als de hoogste kolom.

De 2 div's staan in een container met deze CSS :

code:

.container  {
            width: 780px;
            height: 100%;
            margin: 0px auto;
            border: 1px #333333;
}

.left       {   background: #f0f0f0 url('/images/left.jpg') no-repeat; 
            float: left;
            width: 138px; 
            height: 100%;
            vertical-align: top; 
            font-color: #ffffff;
            text-align: left;
}

.right      {   background: #f0f0f0 url('/images/content.jpg') no-repeat;
            float: left;
            height: 100%;
            width: 642px;
            vertical-align: top; 
            text-align: left;
 }

Ik heb al gezocht en vind veel dingen over hoogtes etc, maar ik krijg geen van de tips werkend.

[BasieP]

zoek eens op faux-colums, volgens mij is dat wat je wilt

[Verwijderd]

Faux colomns probeert volgens mij de inhoud van een div zo groot te maken als het beeldscherm, ik wil de 2 kolommen uitvullen tot gelijke hoogte. De linker is opgevulde met een achtergrond plaatje, menu en wat info. De rechter wordt opgevuld met de echte inhoud van de site. Het is niet te zeggen welke de langste is, maar de kortste moet uitgevuld worden tot langste.

Misschien maakt dit het duidelijker: Tabellen en de nieuwe in div's.

[scorpie]

Wat toevallig nou, ik probeer precies hetzelfde met een header, 3 kolommen en een footer, alleen het lukt ook niet

CSS tutorials zat, hier bijvoorbeeld, gedaan in effectief 10 regels code:
http://www.456bereastreet.com/lab/equal_height/

Alleen... bij mij werkt het niet als ik zijn css constructie in mijn site bouw hehe

[Boelie-Boelie]

Google search op Faux columns levert het volgende op:

A List Apart articles: Faux columns
A simple method of making CSS columns appear equal in length, regardless of the content that they contain.

[Boelie-Boelie]

Scorperito schreef op woensdag 26 april 2006 @ 21:46:
Alleen... bij mij werkt het niet als ik zijn css constructie in mijn site bouw hehe

456 Berea Street: Equal height boxes:
Too bad it doesn’t work in you-know-which-browser.

[scorpie]

Boelie-Boelie schreef op woensdag 26 april 2006 @ 21:53:
[...]


[...]

Ik bedoelde dus ook... het werkt niet in een échte browser... ik kan lezen hoor

[JHS]

Verwijderd schreef op woensdag 26 april 2006 @ 21:39:
Faux colomns probeert volgens mij de inhoud van een div zo groot te maken als het beeldscherm,

Nee, dat doet het niet . Het doet wat je daarna stelt: "kolommen uitvullen tot gelijke hoogte." Door een horizontaal herhalen achtegrond plaatje op een container div te zetten .

[Victor]

Als het om het aanvullen van bijvoorbeeld een achtergrondje gaat:

Cascading Stylesheet:

#container {
    width: 600px;
    float: left;
    background: #f00;
}

#left {
    width: 50%;
    float: left;
}

#right {
    width: 50%;
    float: left;
}

En:

HTML:

<div id="container">
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>

De rode achtergrond van de container schaalt mee met de hoogste kolom. Hier kun je natuurlijk ook een achtergrondafbeelding op zetten voor wat meer mogelijkheden.

[KappuhH]

King_Louie schreef op woensdag 26 april 2006 @ 22:07:
Als het om het aanvullen van bijvoorbeeld een achtergrondje gaat:

Cascading Stylesheet:

#container {
    width: 600px;
    float: left;
    background: #f00;
}

#left {
    width: 50%;
    float: left;
}

#right {
    width: 50%;
    float: left;
}

En:

HTML:

<div id="container">
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>

De rode achtergrond van de container schaalt mee met de hoogste kolom. Hier kun je natuurlijk ook een achtergrondafbeelding op zetten voor wat meer mogelijkheden.

Uhm... moet die float van #right geen right zijn? Dus:

Cascading Stylesheet:

#container {
    width: 600px;
    float: left;
    background: #f00;
}

#left {
    width: 50%;
    float: left;
}

#right {
    width: 50%;
    float: right
}

[Victor]

KappuhH schreef op woensdag 26 april 2006 @ 22:13:
[...]

Uhm... moet die float van #right geen right zijn? Dus:

Cascading Stylesheet:

#container {
    width: 600px;
    float: left;
    background: #f00;
}

#left {
    width: 50%;
    float: left;
}

#right {
    width: 50%;
    float: right
}

Nee, ze komen toch naast elkaar te staan.

[Verwijderd]

Ja klopt, maar ik zou snap niet hoe ik dat zo kan toepassen in mijn website.

Het plaatje wat ik gebruik in de linker kolom is een hoog (ongeveer 1200px) plaatje als background: no-repeat. Het plaatje in de rechter kolom (ongeveer 150px hoog) wordt alleen maar vertoont bovenaan de pagina en speelt dus eigenlijk geen rol. Daaronder is de rechter kolom wit.

Alleen ik krijg deze niet hoger dan de inhoud, terwijl deze eigenlijk tot 100% uitgerekt zou moeten worden, in verhouding tot de container die om beide heen staat.

.... terwijl ik tikte zag ik al veel antwoorden.... even lezen

[ Voor 6% gewijzigd door Verwijderd op 26-04-2006 22:15 ]

[Victor]

Verwijderd schreef op woensdag 26 april 2006 @ 22:14:
Ja klopt, maar ik zou snap niet hoe ik dat zo kan toepassen in mijn website.

Het plaatje wat ik gebruik in de linker kolom is een hoog (ongeveer 1200px) plaatje als background: no-repeat. Het plaatje in de rechter kolom (ongeveer 150px hoog) wordt alleen maar vertoont bovenaan de pagina en speelt dus eigenlijk geen rol. Daaronder is de rechter kolom wit.

Alleen ik krijg deze niet hoger dan de inhoud, terwijl deze eigenlijk tot 100% uitgerekt zou moeten worden, in verhouding tot de container die om beide heen staat.

.... terwijl ik tikte zag ik al veel antwoorden.... even lezen

Ik verkeer in een verregaande staat van brakheid, dus sorry als ik het niet goed begrijp, maar als je je container nou eens een achtergrondafbeelding geeft van een zwarte balk met als breedte je linker kolom, en als achtergrond kleur wit? Dan heb je links een kolom die doorschaalt naar zwart als er geen achtergrond afbeelding meer is van de kolom zelf en rechts gewoon wit.

[Verwijderd]

In IE wordt het plaatje in de linker kolom nu uitgerekt tot 100% van de beeldschermhoogte en de rechter kolom krijgt de achtergrondkleur, dus al wel enige verbetering.

Alleen in FF is er geen verandering. Graag zou ik dit toch oplossen zonder hacks enzo.

[Victor]

Verwijderd schreef op woensdag 26 april 2006 @ 22:30:
In IE wordt het plaatje in de linker kolom nu uitgerekt tot 100% van de beeldschermhoogte en de rechter kolom krijgt de achtergrondkleur, dus al wel enige verbetering.

Alleen in FF is er geen verandering. Graag zou ik dit toch oplossen zonder hacks enzo.

Even letterlijk mijn code overnemen, geen heights of vertical-aligns (die hier overigens geen effect hebben) er bij zetten.

[Verwijderd]

Dat heb ik er nu boven staan. Ik zou verwachten dat het werkt, want ik ken de manier. Maar vreemd genoeg zet hij ze toch onder elkaar. Ook wordt de achtergrond niet eens gekleurd ???

[Verwijderd]

Ik heb het werkend gekregen....

Om zowel in IE als in FF de tabellen uit te rekken gebruik ik nu deze HTML :

code:

<div id="container">
    <div id="left">

    </div>
    <div id="right">

    </div>
  &nbsp;
</div>

De spatie bleek het verschil te maken.

[ Voor 18% gewijzigd door Verwijderd op 27-04-2006 01:19 ]

[JHS]

Dan ging het waarschijnlijk om het clearen van de floats, bij nader inzien . Zie ook deze testcase voor een andere (betere ) methode.

[Victor]

Verwijderd schreef op donderdag 27 april 2006 @ 01:18:
Ik heb het werkend gekregen....

Om zowel in IE als in FF de tabellen uit te rekken gebruik ik nu deze HTML :

code:

<div id="container">
    <div id="left">

    </div>
    <div id="right">

    </div>
  &nbsp;
</div>

De spatie bleek het verschil te maken.

Dan vermoed ik dat het aan het gebruikte doctype ligt, want er is naast de door mij geposte code niets nodig als je het document als XHTML 1.0 strict opmaakt. Dus ook geen lelijke clearing elementen.

Overigens kun je de float: left op de container vervangen door overflow: auto, dat is inderdaad netter JHS

[ Voor 16% gewijzigd door Victor op 27-04-2006 08:10 ]