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 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Position Relative

    Here's my CSS:
    Code:
        body {
            background: #2f2f2f url('images/background.png') center top no-repeat;        
        }
        .tlc {
            background: url('images/top-left.png');
            float: left;
            height: 21px;
            width: 22px;
        }
        .trc {
            background: url('images/top-right.png');
            float: right;
            height: 21px;
            width: 22px;
        }
        .tmc {
            margin: 0 auto;
            width: 962px;
            border-top: 1px solid #06b0d4;
            height: 20px;
            background: #5f5f5f;
        }
        .wrapper { 
            width: 1006px;
            margin: 0 auto;
        }
        .ml { 
            position: relative; 
            width: 20px;
            border-left: 1px solid #06b0d4;
            background: #5f5f5f;
            float: left; 
            min-height:100%;
            height:auto !important;
            height:100%;
            overflow: auto;
        }
        .mr { 
            position: relative; 
            width: 20px;
            border-right: 1px solid #06b0d4;
            background: #5f5f5f;
            float: right;
            min-height:100%;
            height:auto !important;
            height:100%;
             
        }
        .inner {
            position: relative;  
            margin: 0 auto;
            width: 964px;
            background: #242424;;
            min-height:100%;
            height:auto !important;
            height:100%; 
        }
        .nl {
            background: url('images/nav-left.png');
            float: left;
            height: 35px;
            width: 5px;
        }
        .nr {
            background: url('images/nav-right.png');
            float: right;
            height: 35px;
            width: 5px;
        }
        #nav { 
            font-size: 90%; 
            width: 923px;
            margin: 0 auto; 
            background: url('images/nav.png');
            height: 35px;
        }
        #nav ul { 
            list-style: none; 
            margin: 0; 
            line-height:35px; 
        }
        #nav li { 
            display: inline; 
            padding-right: 30px;
            color: #fff;
        }
        .content {
            position: relative;
            color: #fff;
            padding: 20px;
        }
        .footer {
            position:absolute;
            bottom:0;
        }
    And here's my HTML:
    Code:
    <body>
        <div class="wrapper">   
            <div class="tlc"></div>
            <div class="trc"></div>
                <div class="tmc"></div>
            <div class="ml"></div>
            <div class="mr"></div>
                <div class="inner">
                    <img style="padding: 20px;" src="images/banner.png" /> 
                        <div id="nav">
                        <div class="nl"></div>
                        <div class="nr"></div>
                            <ul>
                                <li>Home</li>
                                <li>Forums</li>
                                <li>Memberlist</li>
                                <li>Calendar</li>
                                <li>Downloads</li>
                                <li>Apply</li>
                                <li>Pure Warfare</li>
                            </ul>
                        </div>
                        <div class="content">
                            The content begins omfg!
                        </div>
                </div>
                <div class="footer">
                         Hi
                </div>
        </div>
    </body>
    What I'm trying to do is make the ml, mr, and inner parts have the same height as the content and go all the way down to the footer, which is absolute. However, I just can't get it to work properly and can't figure out the problem. Hopefully a set of fresh eyes will notice what I've done wrong.

    Thanks,
    Karl
    Last edited by -Karl-; 07-06-2011 at 03:42 PM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    what exactly are you trying to do in general? are you trying to make a layout? (seems to be the case)... you might want to check into floating layouts-- you can keep the footer "positioned absolute" by making a sticky footer... (which will do away with the position absolute)... if you are going for a layout, you may want to play with these... it seems at first glance you are using positioning to "lay out" your site, you will keep with common practice (and make your life a lot easier) using floats (able to be seen and "tinkered" with at the link)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well that reply didn't help at all.

    I've said what I'm trying to do, I'm trying to make the content background go all the way down to the footer, instead of just ending after the final piece of text. Thus, I'm using position relative, and for the footer, position absolute. The footer works fine, it's just the content that doesn't go all the way to it.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    my post did help- if you read.... what are you trying to do with the entire page? not just the footer? using positioning to layout a site is going to make your life h** and you are only going to get about 500 replies telling you to stop doing it... what's more is i gave you a link to a floating layout sample site?! i could've just said "google floating layouts".... if you want your footer to be "absolute" make it a sticky footer which can (and from what I've seen usually is) done via NO position attribute...
    so the question bounce back... what are you trying to do with this site? not the footer, he's irrelevant, the site as a whole

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    "I'm trying to make the content background go all the way down to the footer"

    Instead it ends at the last piece of text. This is the third time I've repeated myself now.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Divs by nature expand and shrink based on content. So if you have a small amount of text in a div, it will only expand to contain that small amount of text. Of course this assumes you haven't given that div a specified height style, which you can do, but of course if your content even grows beyond that height, you have to rethink that a bit.

    All you've done, it seems, is give the content div a background color, which again will only fill the div as far as the text expands it. You can give content a specified height of say 500px, but again, there are catches to that as I mentioned before.
    Teed

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by -Karl- View Post
    "I'm trying to make the content background go all the way down to the footer"

    Instead it ends at the last piece of text. This is the third time I've repeated myself now.
    seriously? i mean really? do you read before you post??? look at the link i provided in my first response... stop using positioning to layout your site... it sad that i had to go and copy/paste ur code into a sample i had, compile it and then inspect just to verify what i thought you were doing is what your doing... make a one column floating layout set your wrapper to be 100% high, put ur footer outside the wrapper, give it a height give the wrapper a negative margin relative to the height of the footer... this will do exactly what it is you are trying to do!
    for the third time i've repeated myself. stop using positioning to layout your site- your footer will fall into place and do what you want it to do... google "sticky footer" and play with the layout links i provided in my first response

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I already tried that when I looked at sticky footers. All the happened was my footer moved to a different place, the content background had no change.

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by -Karl- View Post
    I already tried that when I looked at sticky footers. All the happened was my footer moved to a different place, the content background had no change.
    because you are using positioning to lay out your site. use a floating layout... when you mix the two they don't play well together... using positioning is bad practice... you can get a very similar effect using a set "wrapper" with margin of margin:0px auto;... this will pop it into the middle of the screen... then make a header thae is 100% wide and pop it into the wrapper... then make floating columns etc... the first link has a lot of different CSS layouts... check out the floating layouts (i do not like liquid, but if you want to try if go ahead)... then when you have all that, and you have your footer (inside the wrapper) use the stiucky footer method (which i outlined above... move it ouside the wrapper, set height of wrapper, set margin-bottom etc)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I removed the positions when I added the sticky footer, that would just be plain stupid if I didn't. Like I said, it didn't work.

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    here it is with a picture working using a set height. now you can play with it to be height based on %'s

    Code:
    <!DOCTYPE HTML>
       
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>  
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            
            <style type="text/css">
        *{margin:0px; padding:0px;}
        body {
            background: #2f2f2f;        
        }
        #wrapper { 
            width: 1006px;
            margin:0px auto -50px auto;
            height:768px;
            border:1px solid white;
        }
        
        #content {
            color: #fff;
            padding: 20px;
            height:100%;
            width:100%;
        }
        #footer {
            width:100%;
            height:50px;
            clear:both;
            color:orange;
            text-align:center;
        } 
    		</style>
      </head>
        <body>
        <div id="wrapper">   
            <div id="content">
               The content begins omfg!
            </div>
                
                   
        </div>
        <div id="footer">
                         Note that I am the footer and I am stuck at the bottom
        </div> 
        
    </body>
    </html>
    I'm done on this thread
    Attached Thumbnails Attached Thumbnails Position Relative-stickfoot.jpg  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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