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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Question Struggling with backgrounds

    Hey guys,

    Please take a look at a basic site that I am putting together

    mahesh.testsitedomain.eu

    I am really struggling to get my head around how to make the left side menu section background color extend when the content in the right populates further than it's default height. You will see that there is a gap between the bottom of the left side menu, and the top of the footer.

    i've tried a few different things but simply cannot work out how to do it.

    Many thanks in advance for any help.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    901
    Thanks
    0
    Thanked 118 Times in 117 Posts
    In order to make height:100% active you need to set the height for body and html as well
    Code:
    html, body {height:100px;}
    and you need to make #leftside position:absolute instead of position:relative;display:table;:
    Code:
    #leftside
    {
        background: none repeat scroll 0 0 #31507A;
        position:absolute;
        height: 100%;
        width: 250px;
    }
    now that #leftside is invisible to #mainbody, you need to manually move #mainbody to the right equal to the width of #leftside:
    Code:
    #mainbody
    {
        margin: 0;
        padding: 0 !important;
        position: relative;
        width: 1250px;
        margin-left:250px;
    }

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Thumbs up

    Thanks for the response.

    That's it all sorted now!


  •  

    Posting Permissions

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