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 13 of 13
  1. #1
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    Question Making DIV 100% strech on Body

    Hello, I'm trying to make it so the Div (inner-wrap) goes all the way down to the footer.
    Go here: http://rsguard.com/weka

    As you can see, it only goes up until where the content stops. I want it to go down all the way. How do I go about doing this?

    CSS: http://rsguard.com/weka/style.css

    Best Regards,
    MysticScript
    Last edited by UrbanTwitch; 03-08-2009 at 08:33 AM. Reason: NEW URL
    Formerly MysticScript

    6+ years club

  • #2
    New Coder
    Join Date
    Feb 2009
    Location
    Texas
    Posts
    56
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Try this:

    add this to your css

    Code:
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    add height: 100% to the div you want 100%...thats what I do.
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    I already have it.
    Formerly MysticScript

    6+ years club

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello MysticScript,
    Your link is dead for me... I'll check back in a bit and see if it comes up.

    For now, have a look at a demo of a full height layout at http://nopeople.com/CSS/full-height-layout/index.html
    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

  • Users who have thanked Excavator for this post:

    UrbanTwitch (03-08-2009)

  • #5
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Eek, sorry! OK, I fixed the link. Check the first post again. I will check the link you've provided me with and I'll get back to you. ;-)
    Formerly MysticScript

    6+ years club

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    It's back up now.
    That full-height solution will work well for you. You might also want to look into using faux columns so your both columns will be full height.
    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

  • #7
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Argh, I tried to get it to work. No luck.

    Can you please check the CSS to see what I am doing wrong? (I updated the html and css)
    Formerly MysticScript

    6+ years club

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    It's not as complicated as it looks but everyone seems to have a hard time incorporating it into their site.
    The best way is to copy my code and CSS, strip it down to the bare bones and start pasting your code into it. Check that it's working every time you paste something in there... check with the validator often too. (see the links in my sig about validting)

    The most important parts of that code that makes it work is
    1. html and body are height:100%;
    2. main container has a negative margin for the height of the footer
    3. the push inside the main container
    4. the footer OUTSIDE of the main container


    It doesn't work well with nested divs. The main container is the full-height one but nothing else is.
    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

  • #9
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    I'm trying to make it so the header,menu below the header, and footer stretch full way. Everything else contained in width of 790px. I'll see what I can do.

    Update: GENIUS!
    It works: http://rsguard.com/weka/

    I have tested in FireFox 3, IE, and Chrome. They work great. If only I had mac browsers. Meh.

    Also, I tried short content and lots of content and it works accordingly.
    Thanks so much!
    ------
    the only downside.. I can't figure out how to add images to the like the left or right shadow on each sides of the white div
    Last edited by UrbanTwitch; 03-08-2009 at 11:32 AM. Reason: Update
    Formerly MysticScript

    6+ years club

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by MysticScript View Post
    the only downside.. I can't figure out how to add images to the like the left or right shadow on each sides of the white div
    Faux columns and the right image can work wonders.


    It's looking good so far. The #push will work fine there as long as the right column isn't ever the long one. There are some things the validator finds that need fixed - http://validator.w3.org/check?verbos....com%2Fweka%2F
    Last edited by Excavator; 03-08-2009 at 12:09 PM.
    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

  • #11
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    To be honest, I read through the Faux article.. I did not get it one bit. :\
    Formerly MysticScript

    6+ years club

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    See if this shows it better. I just put this up, I've been wanting to make something with an absolute basic explanation.
    http://nopeople.com/CSS/faux_columns/index.html
    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

  • #13
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    I just put this up, I've been wanting to make something with an absolute basic explanation.
    http://nopeople.com/CSS/faux_columns/index.html
    Your example is very succinct! Thanks.


  •  

    Posting Permissions

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