Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-06-12 19:10:13
- reptilerobots
- Member
- Registered: 2005-08-20
- Posts: 72
relative positioning a footer on a page with absolute positioned divs
<code>
#header {
width: 400px;
height: 150px;
position: absolute;
left: 25px;
top: 0px;
padding: 0px;
clear: left;
}
#index_left {
width: 175px;
position: absolute;
top: 250px;
left: 330px;
padding: 0px 0px 0px 0px;
float: left;
}
#index_right {
width: 305px;
position: absolute;
left: 610px;
top: 250px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#footer {
???????
}
</code>
I need help with positioning a footer div on my website. I want it to be 330 pixels from the left (always) and positioned 50 pixels from the bottom of the content of the page. I just cant seem to get it to work. I was using margins before to position my divs, but this was all jacked up in Internet Explorer, so switched to absolute, and top and left positioning.
My website is at <a href=“http://www.justinbartlett.com” target=”_blank”>www.justinbartlett.com</a> if you want to check it out.
thanks!
Offline
Re: relative positioning a footer on a page with absolute positioned divs
If you don’t specify the height of the content area(left and right) you can’t do this.
Put a container around the #index_right & #index_left.
give it one rule: <code>position: relative;</code>
Then, on the footer, change it to read:
<code>
#footer
{
position: relative;
left: 330px;
margin-top: 50px;
}
</code>
Offline
Re: relative positioning a footer on a page with absolute positioned divs
Oh, I just realized that won’t exactly work.
You really need to reconsider floats and margins.
Absolute just isn’t something you can do if you want that footer in there.
Offline
#4 2006-06-12 19:50:35
- reptilerobots
- Member
- Registered: 2005-08-20
- Posts: 72
Re: relative positioning a footer on a page with absolute positioned divs
what would be the best way to position the elements then? without adding a spacer div to the left hand side, say next to #index_left and then using margins to position divs?
Offline
Re: relative positioning a footer on a page with absolute positioned divs
for your middle element, put a div around it, then float each element right. Put the right hand column first in the HTML, then the lefthand column second.
#container {width:810px;}
#index_right{float:right; width:305px;}
#index_left{float:right; width:175px;}
Put a clearing div inside that container div as well.
#clearhack {height:1px, clear:right;}
Then position the footer relatively (as it should already be pushed down the page by the #container.
Offline
Re: relative positioning a footer on a page with absolute positioned divs
I would suggest this book for you: CSS Mastery
It might be called “Mastery” but it starts out easy and goes up from there. It’s also really easy to follow the examples in it.
Last edited by Walker (2006-06-12 20:10:49)
Offline
#7 2006-06-12 20:21:25
- reptilerobots
- Member
- Registered: 2005-08-20
- Posts: 72
Re: relative positioning a footer on a page with absolute positioned divs
thanks!
Offline