By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,422 Members | 1,282 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,422 IT Pros & Developers. It's quick & easy.

Floating and not floating

P: n/a
I might be being silly here.

On my links page I've got a whole load of floating boxes, which I'm
really pleased with.

But then I want the footer to be *below* them.
On my current site (http://www.vowleyfarm.co.uk/CommunityLinks.htm)
I've cheated by putting the footer in a floating box as well, but now
I'm moving to using a CMS I would like not to hack my page template
in this way.

Another way would be to have the "correct" number of <br />'s in the
div with the floating boxes in, but you'd probably have a go at me
for that too.

Can it be done, and how if so?

TIA
Mark

Apr 13 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
jim
Mark, you might give this a try:
<div id="footer" style="position:absolute; left:0px; bottom:0px;
height:55px; width:90%">footer text here</div>

But i think i recall firefox having a problem with that. in which case
I've also done this by applying a percentage value to the top property
of the absolute positioning. You have to play with it a bit to get it
just right, but the following may work for you:
<div id="footer" style="position:absolute; left:0px; top:95%;
height:55px; width:90%;">footer text here</div>

If those two don't work, then you might try floating your footer and
use clear:both within your footer float. Haven't tested that, but it
may be worth a try.

-Jim

Apr 13 '06 #2

P: n/a
jim
MARK-- I JUST TESTED MY PRIOR SUGGESTIONS AND THE
[ FLOAT:LEFT; CLEAR:BOTH ]
SEEMS TO DO IT.
Using your code, here's the solution which works in msie and firefox:

<div id="bottomBar" style="float:left; clear:both; margin:0px;
width:97%; height:75px; background-color:green; color:white;">your
content here </div>

*** PUT THE ABOVE DIV ON ITS OWN (IE: NOT WITHIN THE OTHER DIV ON YOUR
PAGE LIKE IT IS NOW) and at the end of your page after all the other
float code.

Apr 13 '06 #3

P: n/a
On Thu, 13 Apr 2006 11:19:23 +0200, Usenet <Ma**@dont.spamme.invalid>
wrote:
I might be being silly here.

On my links page I've got a whole load of floating boxes, which I'm
really pleased with.

But then I want the footer to be *below* them. Can it be done, and how if so?


Did you try

#footer { clear:both; }
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Apr 13 '06 #4

P: n/a
Barbara de Zoete wrote:
On Thu, 13 Apr 2006 11:19:23 +0200, Usenet <Ma**@dont.spamme.invalid>
wrote:
I might be being silly here.

On my links page I've got a whole load of floating boxes, which I'm
really pleased with.

But then I want the footer to be *below* them.

Can it be done, and how if so?


Did you try

#footer { clear:both; }


As a caution:

http://www.positioniseverything.net/.../peekaboo.html
Apr 13 '06 #5

P: n/a
Thanks both Jim & Barbara,

that clears it up on that page.

Unfortunately my design has been moved on. I have now added another
main div in the page, to offer a main text area with an alternate
colour and boundary. This version, which is still under development,
is at http://ccgi.vowleyfarm.plus.com/NewVF/index.php?id=87 (yeah, I
know, I need to get the nice html pagenames back).

The footer still stays very nicely at the bottom (thanks!), but the
coloured div clearly doesn't include the floating boxes any more :-(

I'm playing with it, but any suggestions, as always, very gratefully
received.

Mark Stanton
One small step for mankind...

Apr 15 '06 #6

P: n/a
> As a caution:
http://www.positioniseverything.net/.../peekaboo.html


What a complicated world. Thanks to Mr Gates for making it ever more so
8-(

Thanks Tony
Mark Stanton
One small step for mankind...
Apr 15 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.