Question

I have the following markup:

HTML

<div class="container">
    <div class="sidebar">
        info <br/>
        info <br/>
    </div>
    <div class="post">
        post <br/>
        post <br/>
        post <br/>
        post <br/>
    </div>
</div>

CSS

container {
    float:left;
    width:100%;
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
}
.post {
    background-color: #ccc;
    margin-left:150px;
}

How could I force sidebar adopt the height of post using HTML/CSS?
Both sidebar’s and post’s height can change in size, but post’s height is always bigger than sidebar’s.

JSFiddle: http://jsfiddle.net/KK4Yc/

Answer 1

Ok I’m not quite sure why the other posters are going to lengths that they are, you just need to use the benefit of the parent->child relationship that dom elements automatically have:

.container {
  overflow: hidden;
  border: 1px solid #ff0000;
}

.sidebar {
  background-color: #eee;
  float: left;
  clear: both;
  width: 150px;
}

.sidebar-wrapper {
  background: #eee;
  overflow: hidden;
}

.post {
  margin-left: 150px;
  background-color: #ccc;
}

The above is all the css you should need (as long as you have a ‘fixed colour’ or ‘repeating background image’ side-bar) and the following is the markup:

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      info <br/>
      info <br/>
    </div>
    <div class="post" style="background: green;">
      post <br/>
      post <br/>
      post <br/>
      post <br/>
    </div>
  </div>
</div>

Obviously (and rather annoyingly from a HTML/CSS perspective) if you don’t have ‘solid colour’ or ‘repeating background’ regions then you’ll have to go with j08691’s javascript approach or Diodeus’s fixed height container approach (although Diodeus seems to have changed code now and included part of caligula’s answer — I guess by accident?).