Positioning problem

HTML & CSS
1

Hey,

If you look at my page and scroll down you will notice two w3c icons. Well, I want to be able to position these elements as a footer under all other elements but haven’t succeeded in accomplishing that yet so far.
I tried setting a clear:left on the container div of the slideshow but that didn’t work.

Anyone has any suggestions?

2

Try

#footer {clear:both;}

3

Well why did that work ?

Thank you!

Also when i try setting a top margin to that footer it doesn’t work, any idea why?

4

The clear property tells an element to step clear of floated items above it.

when i try setting a top margin to that footer it doesn’t work, any idea why?

Well, it does work, except that you would need a gigantic top margin on the footer (larger than the combined height of all elements above) to notice any effect. That’s because a top margin on a non-floated item slips under floated items above it, as it doesn’t really recognize the presence of those floated items. The footer essentially doesn’t know those floated items are even there, and thinks it reaches all the way to the top of the page.

A better solution would be to wrap all of the divs above the footer in a containing div and set that div to overflow: hidden. That would then allow a normal top margin on the footer to take effect.

5

Well I do have a wrapper div containing all elements which has an overflow:hidden to it or can’t the footer be included in this wrapper div?

6

…or can’t the footer be included in this wrapper div?
Hi,
Yes you can leave it in the wrapper. The reason the top margin is working on the footer now is because you have floated it. But that is shrinkwrapping your footer now.

You can either set width:100% on the footer along with the float or you can use overflow:hidden; on the footer with a top padding instead of margin.

If you are trying to get your icons on the left and right then set classes on them and float them accordingly. I usually prefer to keep my inline elements nested in blocks, in that case you could wrap a div or a <p> tag around each footer anchor and hook your left/right classes to those blocks.

#footer {
clear:both;
[COLOR=Red]/*float:right;*/[/COLOR]
[COLOR=Blue]overflow:hidden;
padding-top:45px;[/COLOR]
}
[B].right [/B] {
float:right;
}
[B].left[/B] {
float:left;
}

<div id="footer">
    [COLOR=Blue]<div class="left">[/COLOR]
        <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" 
        alt="Valid XHTML 1.0 Strict" height="31" width="88" />
        </a>
    [COLOR=Blue]</div>[/COLOR]
    [COLOR=Blue]<div class="right">[/COLOR]
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" 
        src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
        </a>
    [COLOR=Blue]</div>[/COLOR]
</div>
7

What exactly do you mean with shrinkwrapping?

I set my links inside a div and floated it to the right with an overflow:hidden; and padding set to the containing footer div. Equal result as with the floating but it feels unnatural to use padding for this though?

8

by the way this is a bit off-topic but what is your opinion about putting a valid xhtml badge on a php page? To me it still makes sense but I’m a bit hesitant to do it becomes a php and not xhtml page.

9

What exactly do you mean with shrinkwrapping?
That means it shrinks to the width of it’s content, if you were to put a background color on the widthless floated footer you would see that it is only as wide as the content. Absolute positioned elements without a width will do the same thing.

Equal result as with the floating but it feels unnatural to use padding for this though?
Yes it is the same result as long as there is no background color/image. If you had a BG and you wanted a visual spacing you would need to use margin.

If the footer was not floated then the margin would go on the bottom of the last float that it was clearing. Ralph had explained why you could not put a top margin on the footer. What I explained was that the top margin was working because you floated your footer, vertical margins are honored when floats are adjoining each other and also they do not collapse like v-margins on blocks.

To me it still makes sense but I’m a bit hesitant to do it becomes a php and not xhtml page.
Actually all the generated code is (x)html, if you view the page source you will see that the html is rendered and not the php.