2 divs in a larger div should be the same height ... but how?

Question

So here is the photo:

What is the problem: I have 2 divs in a div container. The div container expands in height as nessiscary, as well as 2 inner divs. The right div has a border on the left ... but if it is empty, it will not fill the entire height ... how to do it?

Answer 1

The problem you are talking about is called "faux columns", which has been said and described well over the past few years :) http://www.alistapart.com/articles/fauxcolumns/

There are several solutions:

• use the background in the containing div, which will simulate the border
• use CSS3 methods (display: table and display: table-cell, but they are not really designed for this or CSS3 flexbox, which is very experimental and probably won't work in most browsers)
• use JS to set the column height to the maximum element height

The latter solution is not bad, so if you use jQuery, then this can be achieved as follows:

var max=0; $('#container').children().each(function(){ if($(this).height()>max) max = $(this).height(); }); $('#container').children().each(function(){ $(this).height(max); }); 

The script iterates through all the children of the container and finds the highest element. Then it repeats and sets the maximum height for each of them.

Answer 2

HTML

 <div class="wrapper"> <div class="child_1">First Div content goes here</div> <div class="child_2">Second Div content goes here</div> </div> 

CSS

 .wrapper { width: 960px; overflow: hidden; margin: 0px auto; } .child_1, .child_2 { padding-bottom: 9999em; margin-bottom: -9999em; width: 50%; float: left; } .child_1 { background: #f00; } .child_2 { background: #0f0; } 

Answer 3

Try adding a border from right to left. Add a div inside the div container with a comprehensible class. Then in css add the following: .clear {clear: both;}

Answer 4

This is what you are looking for ...

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

---

Also, I assume you are using float , so I highly recommend you read the following:

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

... don't forget to clear your floats!