CODEWITHSUNDEEP
htmlcss
Daniel Ali
Daniel Ali

Reputation: 23

equalization 2 divs height only with css

I want to equal two divs height when a div height large

example :

<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>

the Div 2 height larger then div one

Upvotes: 0

Views: 1133

Answers (3)

gcbenison
gcbenison

Reputation: 11963

Wrap the two div's whose height you are trying to equalize in a container div, i.e.

<div id="container">
   <div class="column">A<br/>B</div>
   <div class="column">C</div>
</div>

Set an explicit height on the container and set height=100% on the columns:

div#container {
   float: left;
   height: 10em;   
}

div.column {
  height: 100%;
  background-color: red;
}

Upvotes: 0

Fabien M&#233;nager
Fabien M&#233;nager

Reputation: 140195

This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/

Upvotes: 0

Adaz
Adaz

Reputation: 1665

I may have a possible solution for you:

http://jsfiddle.net/adaz/wRcWj/1/

Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.

Brief description:

1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix). 2) Float one of the divs inside so the container will expand depending on content inside. 3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.

Cons: - Lack of IE6 support - You need to chose which div will always have less content and then position in absolute

Hope it helps!

Upvotes: 2

Related Questions