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

Glenn

Member
I have 3 divs in a row. The middle div could be different heights depending on the content. The div to the left and right are very thin and I want them to automatically adjust to the same height as the one in the middle. How can I get this to work?
 

CaldwellYSR

Member
I would use jquery to do it. Something simple like...

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

then you'd just call the column_height() function at the body load. A warning about this though: depending on how you set your overflow and how much content you have in each column, you could end up with alot of content being clipped or scrollbars in your left or right columns.
 

Glenn

Member
Parse error: syntax error, unexpected T_VAR in /home/content/GLENNBATES.COM/sites/site5/index.php on line 4
 

CaldwellYSR

Member
That looks like a php error not a jquery error? Do you have jquery loaded on your page? Did you make sure to put that function in a js file and not a php file?
 

keens

New Member
Hey, Glenn.

You can also use CSS. I browsed online for a step-by-step tutorial for you to follow. click here for the reference.

It's working I already tried it myself. Let me know if you are having a difficult time I will help you out.

Cheers!
 

CaldwellYSR

Member
I do not know how to use it as a jquery.

oh... well the error you're getting is because that's not php code :p looking at keens answer I think the problem you're having is much easier fixed than what I was thinking. If all of your columns are wrapped in a container then you can just put overflow: auto; or overflow: hidden; on the container div.
 

CaldwellYSR

Member
That's basically what I did. Here's an example.
http://glennbates.com/sites/site5/

Holy jesus, mary, and joseph dude! You have 70,000 divs in there just for that border image? There are much easier ways to do that with CSS. You can set background images to certain positions and repeats so in your case it would be...

HTML:
background: url(topleft.png) top left no-repeat, url(top.png) top repeat-x, url(topright.png) top right no-repeat, url(right.png) right repeat-y, url(left.png) left repeat-y;

So on and so forth. and that's all one div.

Sorry that I went a little ghetto for a second that was just shocking.
 

Glenn

Member
Holy jesus, mary, and joseph dude! You have 70,000 divs in there just for that border image? There are much easier ways to do that with CSS. You can set background images to certain positions and repeats so in your case it would be...

HTML:
background: url(topleft.png) top left no-repeat, url(top.png) top repeat-x, url(topright.png) top right no-repeat, url(right.png) right repeat-y, url(left.png) left repeat-y;

So on and so forth. and that's all one div.

Sorry that I went a little ghetto for a second that was just shocking.

Where do you get 70,000?
 

keens

New Member
Glenn,

With your current setup, here's my suggestion.

1. remove the left-div and right-div
2. set the width of your main-div to 995px or whichever fits the container
3. create a background image 995px in width
4. set your main-div background to white and that image you just created (e.g. background:url(images/pipe.png) repeat-y #fff;
5. repeat it vertically

This is a quick workaround. There are a lot of ways to fix this, a good fix would be to simplify your CSS and minimize the use of your div.
 

Glenn

Member
Holy jesus, mary, and joseph dude! You have 70,000 divs in there just for that border image? There are much easier ways to do that with CSS. You can set background images to certain positions and repeats so in your case it would be...

HTML:
background: url(topleft.png) top left no-repeat, url(top.png) top repeat-x, url(topright.png) top right no-repeat, url(right.png) right repeat-y, url(left.png) left repeat-y;

So on and so forth. and that's all one div.

Sorry that I went a little ghetto for a second that was just shocking.

I just added this down below the one I had. It didn't work.
 

CaldwellYSR

Member
I did. Didn't work. Take a look.

Hmmmm it says invalid property value... syntax looks right though. Not positive. Try looking here at border images and multiple background images. I've never actually worked with either of them because I haven't ran into a situation where I needed it but it looks like example 27 should fit your needs. Sorry for harping so hard and then being wrong in my solution :p but I do know the way you're doing it is wrong... all those empty divs.
 

Glenn

Member
Hmmmm it says invalid property value... syntax looks right though. Not positive. Try looking here at border images and multiple background images. I've never actually worked with either of them because I haven't ran into a situation where I needed it but it looks like example 27 should fit your needs. Sorry for harping so hard and then being wrong in my solution :p but I do know the way you're doing it is wrong... all those empty divs.

I've tried it with borders before. I can't get images like I am using to line up. Maybe I just need to edit the images more.
 

CaldwellYSR

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.
 

CaldwellYSR

Member
This was so funny the first time I read it.

Haha have you ever seen the </head><body> tattoo?


HTML-Head-Body-Tattoo.jpg
 
Top