DIV in hoogte gelijk maken

[Cidhino]

Hallo iedereen,

Inmidels ben ik met images gaan werken om ronde hoeken te krijgen. Dit is al aardig gelukt alleen zit ik vast op het volgende:

Het is de bedoeling dat de twee div's naast elkaar dezelfde lengte krijgen. Dus naar mate er meer tekst in de ene div komt zal de andere div automatisch dezelfde lengte krijgen en gevuld worden met de achtergrond kleur/afbeelding. Het is dus niet de bedoeling dat de div's met een vaste "height" worden aangegeven.

Heeft iemand hier een oplossing voor?

Zie onderstaande CSS en HTML.

<div id="container">
       <div id="container_left">

    <img src="http://i33.tinypic.com/21mtb9z.png" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip 
  ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu 
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  non proident, sunt in culpa qui officia deserunt mollit 
  anim id est laborum.addsfsdfsfsfasfsdfsdfsdfsfsfegrgdfgdsgdsgsdgdsgsdgdsfhfdkljfnsdkjn sdhsdkh slfsl</p>


    <img src="http://i33.tinypic.com/i24zll.png" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />

</div>    


<div id="container_right">
  <div class="roundtop">
    <img src="#" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip 
  </p>

  <div class="roundbottom">
    <img src="#" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />
  </div>
</div>    
   </div>

</div>

body, html{
   text-align:center;
   background-color:#CCCCCC;
}

#container {
   position:absolute;
     width: 1000px;
     margin-left:-500px;
     left: 50%;
   top:20px;
}

#container_left {
   float:left;
     width: 600px;
   background-color: #fff;
}

#container_right {
   float:left;
     width: 400px;
   background-color: #fff;
   background: url(http://i36.tinypic.com/4l3fih.png) 0% 0% repeat-y;
   color: #fff;
}

.roundcont {
   width: 100%;
   background-color: #fff;
}

.roundcont p {
   margin: 0 10px;
}

.roundtop { 
   background: url(http://i33.tinypic.com/33egz9d.png) no-repeat top right; 
}

.roundbottom {
   background: url(http://i38.tinypic.com/33c8zyp.png) no-repeat top right; 
}

img.corner {
  width: 15px;
  height: 15px;
  border: none;
  display: block !important;
}

[JorenWillems]

Mss met JavaScript. bij het laden van de pagina bereken je via JS de hoogte van de div en gebruik je deze waarde om de hoogte van de andere div in te stellen.

Via Document.GetElementById("divID").style.height,

Document.GetElementById("divID").height,...

Iets in deze aard...

[leroy]

ja. dat is de enige oplossing. Of je moet tabellen gaan gebruiken.

Dan laat je de tabel de hoogte bepalen en stel je de div in als height:100%. Deze zal dan zo ingesteld worden dat hij de borders van de tabel niet overschreid. Alleen die manier is niet de beste oplossing.

Ik denk dat je met een stukje javascript beter af bent in dit geval. Maar doe dat wel averechts.

Daarmee bedoel ik dat wanneer div 1 groter is als div 2. Dan moet javascript div 2 vergroten.

Maar is div 2 groter als div 1. Dan moet javascript Div 1 vergroten.

Voorbeeldje:

<script language="javascript">
function heightEdit(){
    var div1ID = 'container';
    var div2ID = 'container_right';
    var div1 = document.getElementById(div1ID);
    var div2 = document.getElementById(div2ID);
    var heightDiv1 = div1.style.height;
    var heightDiv2 = div2.style.height;

    if(heightDiv1 < heightDiv2){
         document.getElementById(div1ID).style.height = heightDiv2;
    }else{
         document.getElementById(div2ID).style.height = heightDiv1;
    }
    return false;
}
</script>

Het zou kunnen zijn dat de javascript code NIET precies goed werkt, want het is even snel uit het hoofd geschreven.

Als je een klein beetje javascript code kunt lezen weet je wat het doet.

Ik stel eerst wat variabelen in zoals het ID van de div's.

Daarna nog variabelen met de selectors van die div's.

Daarna selecteert hij de hoogte van die geselecteerde div's.

Dan komt de code en ga ik controleren of div 1 (container) kleiner is als div 2 (container_right).

Komt daar de waarde TRUE uit, dan maakt hij de hoogte van div 1 net zo hoog als de hoogte van div 2

Komt daar de waarde FALSE uit, dan doet hij het anders. Maakt hij de hoogte van div 2 net zo hoog als div 1.

Uiteindelijk stuurt hij nog return false terug in verband met als je de functie aanroept dat hij dan altijd false terug geeft. Dit is een klein stukje security voor je scriptje.

Groeten,

Leroy