[CSS] Twee floating divs even hoog maken

[Scott]

Hallo,

Ik ben me de laatste tijd een beetje aan 't verdiepen in XHTML en CSS, en nu wil ik twee div's die naast elkaar staan, even hoog maken. Een wellicht niet onbelangrijke bijkomstigheid, is dat ik het meerdere keren onder elkaar wil. Dit komt doordat het een gastenboek is: in de linkerkolom komen wat dingen over de schrijver van een bericht, in de rechter komt het bericht zelf.

Uiteraard heb ik gezocht, hier kwamen ook twee topics uit die hetzelfde beschreven als ik wil, alleen die oplossing(en) werkte(n) niet:

[rml][ css] Floating divs gelijke hoogte geven[/rml]
[rml][ CSS] Hoe twee divs even hoog krijgen?[/rml]

De twee kolommen staan in een container. Ik heb dus geprobeerd die container een min-height en height (incl. IE hacks) op te geven, en dan de twee div's een (relatieve) height van 100%. Die laatste wordt dan genegeerd: de container krijgt zijn min-height wel (100px), maar de kolommen worden dan geen 100%.

Cascading Stylesheet:

div.gastenboek_entry {
        
    clear: both;
    width: 90%;
    margin: 0 auto;
    min-height: 100px;
    height: 100px;
}
    
html > body div.gastenboek_entry {
    
    height: auto;
}

div.gastenboek_entry div.gastenboek_auteur,
div.gastenboek_entry div.gastenboek_bericht {
    
    height: 100%;
}

Dit werkt dus niet.

Ik heb ook nog geprobeerd een clearing div aan het eind van de container te plaatsen, alleen dit gaf helemaal geen resultaat: alsof die div er helemaal niet staat. Diezelfde div heb ik ook geplaatst aan het eind van de linker kolom, maar ook dit mocht niet baten.

De html die ik gebruik:

HTML:

<div class="gastenboek_entry">

    <div class="gastenboek_auteur">
                    
        <p class="auteur_stats">
            <span class="naam">Naam</span>
        </p>

        <!-- <div style="clear: both"></div> --><!-- Dit werkt dus niet -->
    </div>
                
        <div class="gastenboek_bericht">
                    
            <p class="bericht_datum">
                <span>Datum</span>
            </p>
                    
            <p class="bericht">
                Hier komt het bericht, wat soms meerdere regels kan omvatten waardoor de rechterkolom dus langer wordt
            </p>
        </div>
    <!-- <div style="clear: both"></div> --><!-- Dit werkt dus ook niet -->
</div>

Dit staat in een while loop en wordt dus per gastenboek bericht geplaatst

Heeft er iemand enig idee wat ik moet veranderen, en wat ik moet doen om het te laten werken ? /-\

[ Voor 8% gewijzigd door Scott op 10-10-2005 18:27 ]

[Verwijderd]

wellicht is het artikel faux columns iets voor jou.

[Scott]

Nee, ik denk van niet. Er staat in dat artikel het volgende:

"The whole image is no more than a few pixels tall, but when vertically tiled, it creates the colored columns that will flow all the way down to the bottom of the page"

Maar dat is dus niet altijd de bedoeling, als er nog maar één bericht is geplaatst in het gastenboek, dan moeten die kolommen niet helemaal tot onder doorgaan

[Borizz]

De kolommen moeten wel tot onderaan je div met de classname 'gastenboek_entry' komen dus als je dat principe nou toepast op die div i.p.v. op de hele pagina dan ben je er. In die div is het trouwens heel simpel met een background-image op te lossen!

[BtM909]

Faux columns wordt in dit geval dus niet toegepast op je body, maar op bijvoorbeeld een container div

[Scott]

Ah, zo heb 'k er niet over nagedacht. Bedankt voor de hulp, 'k zal er eens naar kijken en vermelden of het gelukt is of niet

edit: Ligt het nou aan mij of....

Heb nu dit gebruikt:

Cascading Stylesheet:

div.gastenboek_entry {
        
    clear: both;
    width: 90%;
    margin: 0 auto;
    background: url('./img/bar.gif') repeat-y top left;
}

Hij repeat de background nu. In het linker vlak tot de content daar ophoudt (wat ik dus eerst ook al had), en in het rechtervlak tot onderaan...

code:

-----------------------
|  bg   |     bg    |
|  bg   |     bg    |
---------|     bg    |
         |     bg    |
         -------------

Zo ziet het er dus schematisch uit, bg wil zeggen dat daar de background te vinden is...

[ Voor 81% gewijzigd door Scott op 10-10-2005 22:12 . Reden: schets was raar :+ ]

[Scott]

* Schopje *

Met JavaScript lukt het wel, maar dat vind k zo'n ranzige oplossing, iemand die een CSS oplossing weet ?

[frickY]

Ikzelf vermijd het gebruik van floats, omdat ze de document-flow verstoren. Ik doe het zo;

HTML:

<div style="position: relative; width: 600px; height: 300px; background: #DDDDDD">
    <div style="position: absolute; top: 0px; left: 0px; width: 175px; height: 100%; border: 1px dotted red">
        links
    </div>
    
    <div style="margin-left: 175px; height: 100%; border: 1px dotted blue">
        rechts
    </div>
</div>

Werkt net zo goed in IE als FF.

[Verwijderd]

min-height werkt over het algemeen erg slecht, dus proberen niet te gebruiken.

[Scott]

Verwijderd schreef op woensdag 12 oktober 2005 @ 16:07:
min-height werkt over het algemeen erg slecht, dus proberen niet te gebruiken.

Ben ik inderdaad achter gekomen, maar hoe los ik mijn probleem dan op ?

frickY schreef op woensdag 12 oktober 2005 @ 16:05:
Ikzelf vermijd het gebruik van floats, omdat ze de document-flow verstoren. Ik doe het zo;

HTML:

<div style="position: relative; width: 600px; height: 300px; background: #DDDDDD">
    <div style="position: absolute; top: 0px; left: 0px; width: 175px; height: 100%; border: 1px dotted red">
        links
    </div>
    
    <div style="margin-left: 175px; height: 100%; border: 1px dotted blue">
        rechts
    </div>
</div>

Werkt net zo goed in IE als FF.

Ga ik ook ff proberen, maar heb liever een oplossing op het floaten, zal dit zelf niet snel gebruiken (kwestie van stijl denk ik)

[frickY]

Vind het zelf ook geen prachtige oplossing, maar het is de enige makkelijk toepasbare methode welke ik heb kunnen vinden welke in zowel IE als FF foutloos werkt, en ook correct valideerd, zonder gebruik van 'hacks' welke in toekomste browsers versies misschien spontaan niet meer werken, of een averechts effect geven.

Tweede voordeel van deze methode is dat in dit geval de rechter kolom automatisch naar de volledig beschikbare breedte schaalt.

[Scott]

frickY schreef op woensdag 12 oktober 2005 @ 16:33:
Vind het zelf ook geen prachtige oplossing, maar het is de enige makkelijk toepasbare methode welke ik heb kunnen vinden welke in zowel IE als FF foutloos werkt, en ook correct valideerd, zonder gebruik van 'hacks' welke in toekomste browsers versies misschien spontaan niet meer werken, of een averechts effect geven.

Tweede voordeel van deze methode is dat in dit geval de rechter kolom automatisch naar de volledig beschikbare breedte schaalt.

Hmm, ok. En hoe los ik dat probleem met die min-height dan op ?

[BtM909]

Even uit m'n blote koppie: IE hanteert height als min-height

[Scott]

BtM909 schreef op woensdag 12 oktober 2005 @ 16:36:
Even uit m'n blote koppie: IE hanteert height als min-height

Ja, weet ik, daarom gebruikte ik ook dit:

Cascading Stylesheet:

min-height: 100px;
height: auto;
_height: 100px;

Maar nu wordt er gezegd dat dat niet lekker werkt en dat ik dat zo min mogelijk moet gebruiken... Of werkt het op deze manier dan wel goed ?

[Sappie]

ik weet niet wat dat height: auto er nog tussen doet, maar met de underscore hack zou je zo min-height in zowel IE als FF kunnen gebruiken. Ik heb daar nog nooit problemen mee gehad iig.

Liever gebruik je imo echter conditional comments om voor IE < 7 een andere stylesheet mee te geven.

edit:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <style type="text/css">
        .entry { min-height: 100px; _height: 100px; border: 1px solid black; width: 100px; overflow: auto; _overflow: none;  }
        .auteur, .bericht { height: 100%; float: left; width: 50px; background: green; }
        .auteur { background: red } 
    </style>
</head>
<body>
    <div class="entry">
        <div class="auteur"></div>
        <div class="bericht"></div>
    </div>
</body>
</html>

bovenstaande code doet wel wat je wil in IE en FF denk, andere browsers niet getest. (gebruik ook gemakshalve ff de underscore hack ja).

[ Voor 58% gewijzigd door Sappie op 12-10-2005 17:16 ]

[frickY]

ScottB schreef op woensdag 12 oktober 2005 @ 16:34:
Hmm, ok. En hoe los ik dat probleem met die min-height dan op ?

Simpel; Er is geen probleem met de min-height;
Gewoon de height gebruiken, het ding schaalt wel mee als de content hoger is.
Als je dat niet wilt gebruik je de overflow property.

[Kiphaas7]

Wat voor mij werkte was dit:

http://alex-elliott.com/tut05.php

eigen link removed

[ Voor 50% gewijzigd door Kiphaas7 op 22-10-2005 18:33 ]