Divjes die een gelijke grootte hebben

[Bielie993]

Hoi GT,

Ik ben al een dagje aan het stoeien met het volgende probleem.

Ik heb een container div, een main div, en 2 content divs. Het probleem zit hem in de 2 content divs, deze wil ik gelijke hoogtes geven. Als de ene div dus langer wordt dan de andere moeten ze zich op elkaar aanpassen.


Ik heb al meerdere dingen geprobeerd: height: 100%, height: auto, display: inline-block;, en nog veel meer dingen die ik met google had gevonden.

Ik heb onderstaande code gebruikt:

De CSS:

code:

div.mainwebsite {
    background-color: transparent;
    width: 1000px;
        margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
div.main {
    width: 1000px;
    overflow:hidden;
    margin: 0 auto;
}

div.maincontent {
    margin-top: 12px;
    margin-right: 10px;
    width: 650px;
    text-align: left;
    float: left;
    padding: 12px;
    background-color: #1C1C1C;
    opacity: 0.9;
    height: 100%;
    -moz-border-top-left-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #d8d8d8;
    min-height: 450px;
}

div.subcontent {
    width: 288px;
    float: left;
    margin-top: 12px;
    text-align: left;
    padding: 12px;
    background-color: #1C1C1C;
    opacity: 0.9;
    -moz-border-top-right-radius: 12px;
    border-top-right-radius: 12px;
    border: 1px solid #d8d8d8;
    min-height: 450px;
}

De HTML:

code:

<div class="mainwebsite">
<div class="main">
<div class="maincontent">Content</div>
<div class="subcontent">Subcontent</div>
</div>
</div>

Dit ziet er zo uit:

http://team-chronic.com/images/naamloos.png

Hebben jullie enig idee?

[ Voor 5% gewijzigd door Bielie993 op 07-02-2013 18:40 ]

[Dylan93]

Volgens mij ga je dit met css en html niet redden maar heb je hier javascript bij nodig, google eens op javascript div same size o.i.d.

[Nedra]

Een 'probleem' zo oud als CSS. Google eens op Faux columns. Overigens bied CSS3 ook een oplossing met display:table-cell. Hier een linkje met verschillende methodes: http://www.vanseodesign.com/css/equal-height-columns/

[Bielie993]

Heb het al werkent! Hiermee:

code:

<script type="text/javascript">  
 $(document).ready( function(){

  var leftHeight = $(".maincontent").height();

  var rightHeight = $(".subcontent").height();

      if (leftHeight > rightHeight){ $(".subcontent").height(leftHeight)}

         else{ $(".maincontent").height(rightHeight)};

})

 </script>

[ Voor 4% gewijzigd door Bielie993 op 07-02-2013 23:00 ]

[NMe]

...of je had je even ingelezen in wat faux columns zijn en hebt het in een paar regels CSS en een plaatje klaar...