CODEWITHSUNDEEP
htmlcss
Bronzato
Bronzato

Reputation: 9332

Having 2 divs the same height

I have 2 divs beside each other. I would like to have both divs the same height. Possible?

Here is a JsBin as a starting point: http://jsbin.com/uhoqeb/edit#html,live

Thanks.

Upvotes: 0

Views: 91

Answers (4)

aaroncatlin
aaroncatlin

Reputation: 3271

You can also achieve this with javascript:

<script type="text/javascript">
  document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>

Upvotes: 0

Samuele Mattiuzzo
Samuele Mattiuzzo

Reputation: 11038

add a container div

#macroSection {
    height: 250px;
    border: 1px solid #AAA;
}

then add the property "height" to the other 2 divs:

#leftSection 
{
    background-color: #fff;
    width:170px;
    float:left;
    height: 100%;
    border: 1px solid #c7c7c7;
    display:block;

}

#main-content
{        
    width:250px;
    overflow:auto;
    height: 100%;
    border: 1px solid #c7c7c7;
    display: block;
    overflow: hidden;    
}

then wrap them in your html like this:

  <div id="macroSection">
  <div id="leftSection">
    This is my left section
  </div>
  <div id="main-content">
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
  </div> 
  </div>

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Upvotes: 0

sandeep
sandeep

Reputation: 92803

For this you can use display:table-cell property for this.

#leftSection, main-content{
display:table-cell;
}

Check this http://jsbin.com/uhoqeb/2/edit#html,live

But it's not work IE7 & below.

Upvotes: 1

Related Questions