[HTML/CSS] Sidebar zelfde hoogte als outer div

[Beatboxx]

Ik heb een website met een wrapper "main" waarin de main content komt. Deze bestaat uit twee kolommen, sidebar (met menu enzo) en content. Nu heb ik maar drie menu items, en is sidebar niet hoger dan 110px. De hoogte van de content verandert, afhankelijk van de hoeveelheid tekst. De main heeft een border, en ik wil dat de hoogte van de sidebar en de content precies hetzelfde zijn als die van de main, zodat de border er netjes omheen loopt. Dus de hoogte van de rechter kolom is bepalend, en de hoogte van de sidebar en die van de main moeten zich daarop aanpassen. Dat lukt echter niet helemaal, zie jsfiddle of code hieronder:

HTML:

<div class="parent">
<div class="left">Left</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium gravida porta. Suspendisse mattis mattis ipsum sed convallis. Aenean magna orci, luctus et ultrices ac, scelerisque at lectus. Nulla aliquet.</div></div>

Cascading Stylesheet:

.parent {
  min-height: 100px;
  height: auto;
  width: 200px;
  border: 2px solid #000;
}

.left {
  float: left;
  width: 60px;
  height: 100%;
  background-color: #226644
}

.right {
  min-height: 100%;
  height: auto;
  float: left;
  width: 140px;
  background-color: #446622;
}

[danslo]

Komt door je floats. Voeg een clearfix toe aan het einde (maar wel binnen) je parent div.

[Beatboxx]

http://jsfiddle.net/h2RRQ/9/

Dat lost de helft van het probleem op. Nu moet de linker kolom nog net zo hoog als de parent worden.

[martin149]

Ik denk dat je hier je opties kan vinden:
http://www.vanseodesign.com/css/equal-height-columns/

[q-enf0rcer.1]

Probeer dit eens:

.parent {
min-height: 100px;
height: auto;
width: 200px;
border: 2px solid #000;
position: relative;
overflow: hidden;
}

.left {
float: left;
width: 60px;
height: 100%;
background-color: #226644;
position: absolute;
left: 0px;
}

.right {
min-height: 100%;
height: auto;
float: left;
width: 140px;
background-color: #446622;
margin-left: 60px;
}

Doordat we parent position relative meegeven zal elk onderliggend element dat absolute is gepositioneerd op basis van de parent worden geplaatst. dit heeft dus als voordeel dat 100% height de hoogte van de parent zal overnemen. De hoogte van de parent kunnen we gelijk maken met die van de right door er overflow: hidden op te zetten. Dit zal de hoogte gelijk maken met de right.

Hoop dat het zo duidelijk is.

[ Voor 30% gewijzigd door q-enf0rcer.1 op 12-01-2013 16:02 ]