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

Discussion in 'Web Design' started by Glenn, Apr 30, 2012.

to remove all ads.
  1. Glenn

    Glenn Member

    Messages:
    202
    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?
     
  2. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  3. Glenn

    Glenn Member

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

    CaldwellYSR Member

    Messages:
    658
    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?
     
  5. keens

    keens New Member

    Messages:
    16
    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!
     
  6. Glenn

    Glenn Member

    Messages:
    202
    I do not know how to use it as a jquery.
     
  7. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  8. Glenn

    Glenn Member

    Messages:
    202
    That's basically what I did. Here's an example.
    http://glennbates.com/sites/site5/
     
  9. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  10. Glenn

    Glenn Member

    Messages:
    202
    Where do you get 70,000?
     
  11. keens

    keens New Member

    Messages:
    16
    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.
     
  12. Glenn

    Glenn Member

    Messages:
    202
    I just added this down below the one I had. It didn't work.
     
  13. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    It was an exaggeration... you have 11 empty divs for the soul purpose of having a border image. That's unnecessary. If you use the method I described you won't even have to worry about the div height.
     
  14. Glenn

    Glenn Member

    Messages:
    202
    I did. Didn't work. Take a look.
     
  15. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  16. Glenn

    Glenn Member

    Messages:
    202
    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.
     
  17. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  18. Glenn

    Glenn Member

    Messages:
    202
    This was so funny the first time I read it.
     
  19. CaldwellYSR

    CaldwellYSR Member

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


    [​IMG]
     
  20. Glenn

    Glenn Member

    Messages:
    202
    funnnyy!!!!
     

Share This Page