Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
CSS > .clearfix ... !?
On this site > joopvos.nl/txp the #container doesn’t reach the bottom of the browserwindow. It has something to do with #footer (with .clearfix) an the enclosed three divs (floated) … well, that’s what I think. Please have a look because I ‘m stuck … :(
Offline
Re: CSS > .clearfix ... !?
try adding this to #container
padding: 0 0 20px 0;
And you should also add
position: relative
to .article
Offline
Re: CSS > .clearfix ... !?
@ricetxp > Thank you! Adding padding-bottom to the #container did the trick. But can you explain why that is nessesary … !!?? … .clearfix should do the same so I understand!
And giving .article position:relative indeed ties the enclosed p (position:absolute) to its position when the window is resized … but how comes?
Well, it’s clear I still have to learn a lot about CSS … :(
Offline
Re: CSS > .clearfix ... !?
Not sure about the first issue. Clearfix was doing its job, but something was creating a margin at the bottom, so I added some padding to fill it. I’m sure you could work it out given enough time.
On the second issue, position:absolute requires position:relative in order to know where to position itself. It will look for position:relative in the objects (e.g. divs) that surround it. It will position itself relative to the first position:relative it comes across. In your case, there was no position:relative so it positioned itself relative to the entire body.
Offline
Re: CSS > .clearfix ... !?
@ricetxp > Ah, only an hour ago I came across the subject of positioning absolute <> relative in ‘CSS Mastery’ … with your explanation I now fully understand what’s happening … :)
The first issue is indeed solved but I’ll will have a look again why .clearfix didn’t work as it should!
Offline
Pages: 1