View Full Version : How to float a button bar?

02-10-2004, 03:52 PM
New to positioning using CSS :o

I want the row of buttons, currently fixed at the bottom of my page, to "float" at the bottom of the browser window. In Other words, the buttons are always displayed at the bottom of the window as I scroll the document.

My problem: "position: fixed" does not seem to have any effect. The buttons remain in their original position.

I'm using IE 6 in Windoze XP.

Here's my code skeleton.

.floatButtons {
position: fixed;
bottom: 10%;

<table class='floatButtons' ...>
<input type='submit'...>
<input type='reset'...>
<input type='hidden' ...>

02-10-2004, 10:18 PM
.floatButtons {
background-position: bottom center;

02-11-2004, 01:41 PM
Sorry Zubie, didn't work. The button-table stayed put.

There's gotta be something fundamental that I'm missing...

I took the buttons (<input> tags) out of the <table> and put them in a separate <div> - same tag nesting level as the <table>. Still same non-results.

When using the <div> I tried writing the code as given by Zubie, and as I had it originally. No effect in either case.

"position: relative;" and "position: absolute;" do affect the placement, but "fixed" seems to have no effect.

02-11-2004, 01:47 PM
Older versions of IE don't support position: fixed; not sure about IE6, though. Maybe you failed to supply an appropriate doctype, causing it to go into quirks mode.
There is a cross browser alternative, by the way, using abs positioning; I just saw it yesterday. Have to look it up, be back soon.


Hah, of course it was A List Apart (http://www.alistapart.com/): "Exploring footers" (http://www.alistapart.com/articles/footers/).

02-11-2004, 02:22 PM
None of the examples in that article did what I want. The referenced article shows how to consistantly display a footer at the bottom of some content. However when the window is resized such that the content goes below the the window, the footer is not seen. This is fine for footer behavior, but that's not quite what I have in mind.

02-11-2004, 02:39 PM
No version of Internet Explorer supports position fixed. But you can emulate it in javascript with something like this:


02-11-2004, 02:44 PM
Thanks B.C.;
Now I gotta learn how to do events in IE. Where did I put that link to the JavaScript Doc?......