CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 308

Forcing element be the same height as sibling element?

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/

Upvotes: 0

Views: 8481

Answers (4)

Pebbl
Pebbl

Reputation: 35995

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?).

Upvotes: -1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

If the container has a fixed height, then yes, otherwise you need to use JavaScript. 

   body, html { height:100% }

    .container {
        width:100%;
        height:500px;
        border:1px solid #ff0000
    }

#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}

Upvotes: 0

d.k
d.k

Reputation: 4460

It is possible to do via JS, as j08691 said. But you can try different approach, with pure css for instance add a grey bg-image to the .container, so it will look like the sidebar extends to the bottom, or add additional element with the same purpose (FIDDLE):

.container {
    float:left;
    width:100%;
    overflow:hidden;
    position: relative;
}
#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}


<div class="container">
    <div id="bg"></div>

Upvotes: 0

j08691
j08691

Reputation: 207861

Can't do it without JavaScript unless you fake it with faux columns. If you want to use jQuery, it's a one-liner:

​$('.sidebar').height($('.post').height());​

jsFiddle example

Upvotes: 2

Related Questions