2 divs automatisch dezelfde hoogte

Status
Niet open voor verdere reacties.
Ladyke

Ladyke

Gebruiker
Lid geworden
9 okt 2010
Berichten
671
hoi,

ik heb een webpagina gemaakt met 2 div's naast elkaar, ik heb nu een position absolute de divs naast ekaar gekregen.
nu wil ik dat ze automatisch dezelfde hoogte krijgen naarmate de schermgroote van de user.
de inhoud is natuurlijk van verschillende hoogte.
kan iemand me helpen ?


Ladyke
 
Je zou een height van 100% aan de body kunnen geven en de twee divs daarbinnen een height in procenten die beide het zelfde zijn.
 
Hoi Ladyke,
Je bedoelt dat de achtergrond van beide kolommen dezelfde hoogte moet hebben?


  • Dan moet je geen absolute posities gebruiken om de div's naast elkaar te zetten (dan isoleer je ze volledig, zowel van elkaar als van de <body>), maar ze naast elkaar te zetten met een float.
  • Samen komen ze in een container-div.
  • Onder de floats, maar nog net binnen de container, komt een clear-div, zodat er onder de hoogste van de twee doorgegaan kan worden.
  • Vervolgens kan je aan de container-div een gezamenlijke background-figuur koppelen (over de volle breedte dus), die zich verticaal herhaalt: zo ver als nodig is voor de hoogste kolom.
  • De background voor de kortere kolom is er dan ook, en het lijkt net alsof die ook zo hoog is. Het heten ... faux columns (nep-kolommen).

Uitleg met een plaatje erbij: hier (en op de volgende pagina's) te vinden.

Met vriendelijke groet,
CSShunter
 
ik heb nu dit :

HTML: 
CSS:

#container1 {
    
    width:100%;
    margin-left:-25%;
    position:relative;
}
#col1 {
    float:right;
    width:25%;
    background:white;
   border:1px solid black;
}
#col2 {
    float:right;
    width:25%;
    background:white;
   border:1px solid black;
}

HTML:

<div id="container1">
    <div id="col1">...inhoud...</div>

    <div id="col2">...inhoud...</div>
</div>

wat zou ik nog moeten aanpassen ?
 
Hoi Ladyke,
Het lijken nu even hoge kolommetjes ... maar: stop er maar eens twee teksten in die niet even groot zijn.
En geef ook de #container eens een {border: 1px solid red;}.

Wat zie je dan?
 
Hoi Ladyke,
Mooi :thumb:, en om het niet zelf te hoeven verzinnen is dat een aardige site voor in de favorietenmap! ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan