Menu
I have two DIVs, .sidebar and .content and I want to set .sidebar to keep the same height with the .content.
I've tried the following:
$(".sidebar").css({'height':($(".content").height()+'px'});
$(".sidebar").height($(".content").height());
var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);
None of these are working. For the .content I don't have any height since will increase or decrease based on the content.
Please help me. I have to finish up a web page today and this (simple) thing is giving me headaches.
Thank you!
696
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
The reason your first example isn't working is because of a typo:
$(".sidebar").css({'height':($(".content").height()+'px'});
should actually be
$(".sidebar").css({'height':($(".content").height()+'px')});
you're missing a trailing bracket from before the .content selector.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
