How do I set the css height on divs to automatically be the same?

Glenn

Member
Well the jquery method will work. You need to put this in your <head>:

HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

then in another script tag put:

HTML:
<script>
$(function() {
    var h = $("#center").outerHeight(); // outerHeight return height plus padding
    $('#leftcol').css('height', h);
    $('#rightcol').css('height', h);
})
</script>

That being said, the best way to do this is going to be border images. It will require editing your image pretty precisely but in the end it will yield the best and fastest results.

This worked in firefox and even IE but did not work in Chrome.
 

CaldwellYSR

Member
That's strange... you're right it doesn't work in chrome. I don't know what to tell you.... logically that should work. It looks like in chrome the outerHeight method is pulling the wrong height... maybe you could pull just the regular height and then add whatever padding that main div has to it?
 

Glenn

Member
That's strange... you're right it doesn't work in chrome. I don't know what to tell you.... logically that should work. It looks like in chrome the outerHeight method is pulling the wrong height... maybe you could pull just the regular height and then add whatever padding that main div has to it?

Not sure how to do that either. I found yesterday that it doesn't work in older versions of IE. Not surprising though.
 

CaldwellYSR

Member
Sorry... I didn't clarify. You know what padding you're putting on in the CSS and I assume that won't. Change so you could use the .height() method instead of the outerHeight() method for your variable assignment. Then add the necessary padding. I'm on my phone right now so please don't make me write it out ;)
 

Glenn

Member
Is there a way to have a background image for the right side of a div and different one for the left side? I need each to repeat y of coarse. That would solve my problem.
 
Top