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 7 of 7
  1. #1
    kao
    kao is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    18
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Child spilling out of parent div

    I've stared at this for some time now and to no avail can i come up with a solution that keeps the liquidy of the website.

    what i am trying to accomplish for the right-content to fill all available space height wise inside of its parent which is the bottom-container.

    but giving it a min-height:100% makes it overflow the parent.

    Live example can be found at the following link

    http://alan-michael.com/clients/debra/index.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello kao,
    I'm not sure the point of setting heights on your #content if you want it to contain the taller stuff you put in it.

    Just for fun, remove those heights and see what it does -
    Code:
    #content {
        background-image: url("b2-1.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        height: 99.99%;
        max-height: 1080px;
        min-height: 800px;
        max-width: 1920px;
        min-width: 1280px;
        width: 100%;
    }
    Look at a couple examples I have of full height layouts that may work better.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    kao
    kao is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    18
    Thanks
    4
    Thanked 2 Times in 2 Posts
    well I its not supposed to be that tall

    Its supposed to be as big as its container allows at least thats how i want it to work

    below is a fixed height example of what i want the first version to do but liquidly

    http://alan-michael.com/clients/debra/remix/index.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by kao View Post
    well I its not supposed to be that tall
    Hmm, but #right_content is 2085px high. How do you want to handle that overflow? With a scroll bar?
    Code:
    #content {
        background-image: url("b2-1.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        height: 99.99%;
        max-height: 1080px;
        max-width: 1920px;
        min-height: 800px;
        min-width: 1280px;
        overflow: scroll;
        width: 100%;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    kao
    kao is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    18
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Iv'e tried that but no luck. and yes it does scroll but i use some jquery tools for that.

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts

  • #7
    kao
    kao is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    18
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by tempz View Post
    that is actually what i am using


    this is what i am trying to make it do but using a % so it grows or shrinks with screen size
    http://alan-michael.com/clients/debra/remix/index.html ( this is static)

    and this is where i am at now with the code spilling out of its parent div
    http://alan-michael.com/clients/debra/index.html (attempting to make liquid)


  •  

    Posting Permissions

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