[CSS] Hoe twee divs even hoog krijgen?

[JayVee]

Hey,

Ik ben bezig "echt" XHTML en CSS te leren en uiteraard gebruik je dan geen table hacks meer om je layout te maken.

Maar nu heb ik het volgende probleem:

Ik heb op dit moment (met tables!) een pagina met bovenaan een banner, daaronder een tabel met twee regels en drie <td>s, en daaronder een grote regel (colspan) met een disclaimer.

Het probleem ligt in het middelste gedeelte van de pagina:

De content staat in B en deze div is dus variabel kwa hoogte. Nu moeten A en C even hoog zijn als B, aangezien zij het achtergrondplaatje van B completeren.

In een tabel is dat makkelijk, aangezien de hoogste <td> de hoogte van alle <td>s in die <tr> bepaalt. Maar met divs?

Op dit moment heb ik dit:

HTML:

#div_A {
  width: 150px;
  position: absolute;
  left: 10px;
}

#div_B {
  width: 450px;
  position: relative;
  left: 154px;
}
    
#div_C {
  width: 150px;
  position: absolute;
  left: 618px;
  top: 59px;
}

Margin, border en padding maakt even niet uit. Let ook niet op de left en top attributen.

div_B heeft als enige position: relative, zodat elementen die onder deze "tabel" komen horen onder div_B komen te staan. Daarvoor moet je static of relative gebruiken, zodat het element in de page flow opgenomen wordt (en plek in beslag neemt).
div_A en div_C hebben absolute positie, om ze naast div_B te kunnen zetten. Aangezien divs block-elements zijn (en geen inline) gaan ze onderelkaar (en nooit naast elkaar!) staan als je ze normale flow gebruikt.

div_A en div_C gewoon height: 100% geven helpt niet, want: 100% waarvan? Aangezien deze twee absolute positie hebben hebben ze geen verband met div_B, al stop je ze gezamelijk in een grote div.

Een grote div maken met div_B erin die zijn eigen achtergrondplaatje heeft werkt ook niet aangezien div_A en div_C verschillende achtergrondplaatjes hebben!

Dus, oh grote HTML en CSS puristen! Hoe los je dit op? Toch maar een tabel pakken? Dat zou wel erg jammer zijn, ben je nog steeds aangewezen op tabellen voor layout.

[ Voor 5% gewijzigd door JayVee op 12-01-2004 16:29 ]

[disjfa]

--

ten eerste gelieve geen tables te gebruiken. en als je 100% hoogte wilt moet je vlink gaan spelen met je site. daar is hier al genoeg over te vinden maar het beste blijft als je gewoon de divjes vult met data zodat hij over heel t scherm komt ipv helemaal uitzoeken hoe je dat kan regelen

alhoewel als je goed zoekt een erg net voorbeeld van crisp kan vinden.

edit:
ik ga muij voortaan goed behouden posts te maken om dit soort tijdstippen... zit al te lang achter de comp...

[ Voor 113% gewijzigd door disjfa op 12-01-2004 16:29 . Reden: harrrr! ]

[faabman]

waarom stop je het achtergrondplaatje niet gewoon als background van je body

[André]

Je moet ze alledrie in een container div gooien en de groote dan relatief maken aan die container.

[Verwijderd]

http://www.alistapart.com/articles/fauxcolumns/

[JayVee]

disjfa, ik heb geen idee waar je het over hebt!
"gelieve geen tables gebruiken": Dat is nou juist de reden voor mij om dit topic te openen...

FvKnijff: De body is wit. Alleen het "tabelletje" heeft achtergrondjes.

André: Waarom dat niet werkt staat in de topicstart!

Ik heb even een plaatje bijgevoegd in de topicstart!

<edit>
Anne, ala is ook een van mijn favorite websites. Die oplossing is geniaal! Zal meestal wel werken. Maar het biedt dus geen oplossing om divs idd even hoog te krijgen.
</edit>

[ Voor 36% gewijzigd door JayVee op 12-01-2004 16:46 ]

[faabman]

div a en c hoeven helemaal geen absolute positie te hebben als je de hele handel in een grote container gooit... dan kan je het gewoon met een float:left doen

ASP:

<div id="site_container">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</div>

#site_container{}

#a{
display:block;
float:left;
width:xxx;
}


#b{
display:block;
float:left;
width:xxx;
}


#c{
display:block;
float:left;
width:xxx;
}

probeer hier maar eens wat mee...

[JayVee]

Dat met die container is idd handig!

Maar is er een manier om die container zo groot te krijgen als de grootste div? In het voorbeeld van FvKnijff is de container erg klein en de divs gewoon variabel.

Ik heb een lijst met beschrijvingen. Elke bestaat uit tekst en een plaatje in een container div.
De tekst loopt rond het plaatje dmv "float: right".

Probleem: Als de tekst heel kort is dan is de container ook maar heel klein en volgt de volgende container zo dat de tekst van deze door het plaatje van de vorige container loopt.
Wat dus eigelijk moet gebeuren is dat de eerste container minstens zo hoog is als het plaatje.

Wie heeft daar een oplossing voor? (en ja, ik vind dit nogal in dit topic erbij kunnen)

Ik vond die truc met het speciale achtergrondplaatje (post van Anne) wel beetje een hack... Het lijkt erop dat je meerdere even grote divs hebt. Maar wat als je dat nou echt nodig hebt? (en niet alleen voor de achtergrondplaatjes?)

[CrashOne]

Die oplossing van ala is naar mijn idee toch goed, je ziet wat je wilt? Volgens mij is een andere manier alleen maar moeilijk doen.

[McVirusS]

Ook een handig linkje voor dit soort dingen: http://www.thenoodleincid...als/box_lesson/boxes.html

[Michali]

André schreef op 12 januari 2004 @ 16:11:
Je moet ze alledrie in een container div gooien en de groote dan relatief maken aan die container.

Ik heb hier zelf ook veel problemen mee, ik moet zeggen dat dit nu nog soms de enige reden is waarom ik dan nog een tabel gebruik. Zou je mischien een klein werkend voorbeeld kunnen geven, zodat ik echt duidelijk kan wat je bedoelt? Ik heb er zelf al veel mee geexpirimenteerd, maar er is nooit iets werkends uit gekomen:

code:

<style>

#a, #b, #c
{
    padding: 3px;
    margin: 5px;
    width: 100px;
    float: left;
    background: #eeeeee;
    border: 1px solid #bbbbbb;
    display: block;
    height: 100%;
}

#container
{

}

</style>

<div id="container">
    <div id="a">a</div>
    <div id="b">b<br/>b<br/>b</div>
    <div id="c">c</div>
</div>

Dit werkt bijvoorbeeld ook niet...

[disjfa]

code:

#container
{
    height: 100%;
}

_{nog ff uitleggen waarom:
die hoogte in #a, #b en #c nemen de hoogte van de parent aan. van de #container dus. als die geen hoogte heeft is 100% van iets wat je niet weet niets.}

[ Voor 67% gewijzigd door disjfa op 13-01-2004 11:01 ]

[Michali]

Thanks, dat was even het zetje wat ik nodig had. Nu begrijp ik het wel. Ik zat er steeds 'net' naast, geen idee dat ik zo dichtbij was. Tabellen per nu afgeschaft voor zaken waar ze niet voor bedoeld zijn

[ Voor 24% gewijzigd door Michali op 13-01-2004 11:01 ]

[Clay]

JayVee
Ik vond die truc met het speciale achtergrondplaatje (post van Anne) wel beetje een hack... Het lijkt erop dat je meerdere even grote divs hebt. Maar wat als je dat nou echt nodig hebt? (en niet alleen voor de achtergrondplaatjes?)

Het zetten van een tilende background image op een container is een hack? Die logica volg ik niet helemaal Volgens mij stipt het faux columns artikel hier ook een heikel punt aan, maar laat het juist de essentie ervan liggen, en dat is jammer.

Het is 9 van de 10 gevallen helemaal niet nodig dat 2 elementen even hoog zijn. De kracht van CSS ligt in de manier waarop de verschillende display types (zoals block, inline etc) en position types (absolute, relative etc) in staat zijn zonder dimensies of posities de flow en scalability van je pagina te beheren. Het gaat er niet om alles met left, top, width en height in een bepaalde positie te forceren.

Het dwangmatig alles van dimensies voorzien zoals dat ooit misschien nodig was werkt nu alleen maar in je nadeel, dat kan je beter zo weinig mogelijk doen. Met slechts een klein aantal van dat soort elementen, effectief voorzien van al dan niet tilende backgrounds, kan je hele layout opbouwen, en de overige elementen hoeven alleen maar van content style voorzien te worden.

Veel problemen, en oordelen, liggen imo ook daaraan ten grondslag

disjfa

code:

#container
{
    height: 100%;
}

Jah Daar is het overigens wel bij aan te raden een min-height aan toe te voegen voor echte browsers, die kappen alles na die 100% (nml. viewport height) anders af:

code:

#container {
    min-height:100%;
    height: 100%;
}

   body > #container {
       height:auto;
   }

De 2e regel reset de height, maar niet in IE (wat ook niet moet) omdat die de > niet snapt.

[disjfa]

code:

min-height:100%;
_height:100%;

is dan weer een css hack van wat clay ^^ daar neerzet. ook wat minder mooi en verder ook eens met clay over de dimensie verhoudingen.

[JayVee]

Hm, als je die container gelijk 100% maakt is hij zo groot als je viewport ja.

Ik heb dus dit probleem:

HTML:

div.showcase {
  margin: 50px 50px 0px 50px;
  padding: 10px 10px 10px 10px;  
  border: 2px ridge #88A9D6;
  
  background-color: #FFEBCB;
}

<div class="showcase">
  [img]"bla.gif"[/img]
  <h2>Titel</h2>
  <p> wat tekst</p>
</div>

Als de tekst naast het plaatje dus te kort is wordt de container niet groot genoeg en valt het plaatje buiten die div!

Enige oplossing die ik tot nu toe zie is de container met min-height zo groot te maken als het plaatje. Maar wat als die plaatjes niet altijd even groot zijn?

[Verwijderd]

Zoek is wat op over 'clear'.

[Michali]

JayVee schreef op 13 januari 2004 @ 14:41:
Hm, als je die container gelijk 100% maakt is hij zo groot als je viewport ja.

Maar als je die container weer in een andere zet, en die schaalt zoals je wilt, ben je klaar. Zo kun je het wel perfect controleren.

[JayVee]

Verwijderd schreef op 13 januari 2004 @ 15:59:
Zoek is wat op over 'clear'.

http://www.w3schools.com/css/pr_class_clear.asp

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.

Note: This property does not always work as expected if it is used along with the "float" property.

And then? Het floaten op zich werkt goed. Ik weet niet hoe clear zou moeten helpen om de container div minstens zo groot als het plaatje te krijgen.

[Michali]

Even een voorbeeld van hoe het kan:

code:

<style>
    #container
    {
        border: 1px solid #999999;
    }
    
    #1, #2, #3
    {
        float: left;
        border: 1px solid #bbbbbb;
        background: #eeeeee;
        width: 32%; 
        height: 100px;
        margin: 1px;
    }

    #clear
    {
        clear: both;
    }
</style>

<div id="container">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="clear"></div>
</div>

[Scurra]

JayVee schreef op 13 januari 2004 @ 14:41:
Hm, als je die container gelijk 100% maakt is hij zo groot als je viewport ja.

Ik heb dus dit probleem:
[...]

Eric Meyer heeft een interessant artikel over problemen met floats gepubliceerd. De oplossing is, zoals anderen hier ook al zeggen, werken met clear.

[JayVee]

KijK! Dat is een vet artikel, exact wat ik nodig had!
Heb een paar weken geleden een boek van hem besteld, helaas is het er nog niet.