Set separated content as same height using CSS

Question

I'm trying to make my sidebar div the same size as content div, I could set container div to white and would work "As I wanted" but I need to keep this small empty background at the middle of content and siderbar to look like they are separated...

I already tried something like this: CSS: Set Div height to 100% - Pixels

I spent more than an hour trying to figure it out but nothing work in here... The only way I could do it was Javascript but that's not friendly.

Here's an example of my question: http://jsfiddle.net/cn7cd/1/

Thanks for reading.

score 1 · Accepted Answer · answered Mar 11 '13 at 01:08

1

have a look at this http://css-tricks.com/fluid-width-equal-height-columns/

it has a good recap of different methods to achieve what you are after

answered Mar 11 '13 at 01:08

Luca

9,259
5
46
59

Thanks, I'm going to use example CSS Table edited to work in IE too. Here is it: http://jsfiddle.net/cn7cd/3/ – Pedro Gabriel Mar 11 '13 at 01:55

score -2 · Answer 2 · answered Mar 11 '13 at 01:06

-2

I dont know if you are ok to use a bit of JQuery, but if that the case, here is a possible solution

var cHeight = $('#content').css('height');
$("#sidebar").css('height',cHeight);
console.log($("#sidebar").css("height"));

Demo

answered Mar 11 '13 at 01:06

MimiEAM

2,505
1
26
28

Set separated content as same height using CSS

2 Answers2