Re: [css-d] Trouble with positioning - not understanding this

[ross]

Make it absolutely postitioned within the footer div. To do this you must 
define the footer div as position:relative.

#outer_box{
    margin:  0 auto;
            padding: 0;
            width: 760px;
}
#footer{ background-image: url(../bkgrnd_imgs/foot_bg.jpg);
            background-repeat: repeat-x;
            background-color: #0A2F76;
            color: #FFFFFF; padding: 0;
                margin:0 auto; height: 143px; width: 758px;
                border: 1px solid #0A2F76;
             position:relative; // add this line
}
p.addr {text-align: center;
            padding:  5px 0; margin: 0;
            font-size: 0.8em;
}
#footer_tag { position: relative; bottom: 2px; }
 p.copy { position:absolute; left:0; bottom:0; }


<div id="outerbox" >

Some content divs for the top, and middle of the page


<div id="footer" >

        <p class="addr">1815 S.W. Marlow,  Ashland, Oregon 97520<br />
            (541) 292-8912 &#8226; (800) 681-3200</p>


            <p class="copy">&copy; 2007 &#8226; Progressive Associates
                &amp;<a href="#"> Lane Design</a>. All Rights Reserved.</p>


    </div>
<div>
</body>
</html>



----- Original Message ----- 
From: "Robert Lane" <[EMAIL PROTECTED]>
To: "Css-Discussion Group" <css-d@lists.css-discuss.org>
Sent: Monday, April 30, 2007 12:29 AM
Subject: [css-d] Trouble with positioning - not understanding this


>I am struggling with some positioning.  Basically, I have a div at the
> bottom of a page that is defined to have a height of 143px.
> It has a background image of that size.
>
> I then have some text that I want centered and positioned near the top
> of the div.  I put that in a <p> tag with a class="addr"
>
> I then put another paragraph tag with a class of "copy"  I want this
> text at the very bottom of the footer div and aligned left.  I was
> having no luck with getting it on the bottom so  I wrapped the p.copy in
> a new div with an id of "footer_tag", then I tried to position that
> relative with a bottom of 0.  But that doesn't seem to do it either.
>
> What would be the right way to get this bugger down to the bottom left
> of the footer?
>
> Here is the detail from the page:
>
> Styles
> #outer_box{
>    margin:  0 auto;
>            padding: 0;
>            width: 760px;
> }
> #footer{ background-image: url(../bkgrnd_imgs/foot_bg.jpg);
>            background-repeat: repeat-x;
>            background-color: #0A2F76;
>            color: #FFFFFF; padding: 0;
>                margin:0 auto; height: 143px; width: 758px;
>                border: 1px solid #0A2F76;
> }
> p.addr {text-align: center;
>            padding:  5px 0; margin: 0;
>            font-size: 0.8em;
> }
> #footer_tag { position: relative; bottom: 2px; }
> p.copy { padding: 6px ;  font-size: 0.7em;
> text-align: left; }
>
> Structure:
>
> <div id="outerbox" >
>
> Some content divs for the top, and middle of the page
>
>
> <div id="footer" >
>
>        <p class="addr">1815 S.W. Marlow,  Ashland, Oregon 97520<br />
>            (541) 292-8912 &#8226; (800) 681-3200</p>
>
>        <div id="footer_tag">
>            <p class="copy">&copy; 2007 &#8226; Progressive Associates
>                &amp;<a href="#"> Lane Design</a>. All Rights Reserved.</p>
>        </div>  // closes footer_tag div
>
>    </div> //closes footer div
> <div> //Closes the outerbox div
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 


______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/