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 • (800) 681-3200</p>
<p class="copy">© 2007 • Progressive Associates
&<a href="#"> Lane Design</a>. All Rights Reserved.</p>
</div>
<div>
</body>
</html>
----- Original Message -----
From: "Robert Lane" <[EMAIL PROTECTED]>
To: "Css-Discussion Group" <[email protected]>
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 • (800) 681-3200</p>
>
> <div id="footer_tag">
> <p class="copy">© 2007 • Progressive Associates
> &<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/
