Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Equal Height Columns

    Can't figure out how to get the left sidebar (grey background) the same height as the main content section (blue background) by applying height: 100%; to html, body, wrapper, etc. Can anyone help me out?

    You can view the problem at the following address:

    http://yukoncontractors1.businesscat...ggestions.html

    Thanks.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Put them in a container div of a specified height, and then tell them height: 100%; If you want to see how the divs are laid out, at the end of all the style statements put

    div {border: 1px solid magenta}

    and their borders will light up for you.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts
    DrSOS

    I can't use a specified height for the container as the content in the main content section will vary from page to page. I need a solution that will automatically make the left sidebar the same height as the main content section irregardless of how much content is placed in the main content section.

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    This is one trick that I learned (don't remember where). Add this to your columns:

    padding-bottom:1000px;
    margin-bottom:-1000px;

    Like magic, your columns are now equal in height.
    My signature :)

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ttkim

    Your solution made the main content the same height as the left sidebar. I need a solution that makes the left sidebar (grey) the same height as the main content section (blue).

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Try taking out the height:100% from the container (two-column-container).
    My signature :)

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Well, you can certainly do it with javascript.
    Code:
    document.getElementById("left_sidebar").style.height = document.getElementById("main_content").offsetHeight;
    You have to supply the right IDs.
    Last edited by DrDOS; 07-26-2013 at 12:16 AM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ttkim

    Removed the height: 100%; from the two-column-container and now everything works just fine. Thanks for all your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •