April 24, 2012

Dynamic height increase of one div with respect another div

Question by Srinivas

I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.

Answer by Starx

Assuming the elements are after body. Give 100% to the body, and all the div

body, #div1, #div2 { height: 100%; }

If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.

#parent { height: 800px; }
#div1,#div2 { height: 100%; }

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!