CSS positioning cross-browser (well IE, FF)

[hzgt9b]

I've got html page with has a fixed height - there are five buttons on
the page. The page has a fixed, known height - but the width can
change. The five buttons should be arranged on the page as follows
(all buttons should always be 3px from the top):

"button1" - left edge always 3px from left side of the page
"button2" - left edge always be 5px to the left of "button 1:"
"button3" - buttons three and four should float (relatively) in the
middle of the page
"button4" - left edge always be 5px to the left of "button 3:
"button5" - right edge always 3px from right side of page

Button2 could float to the left of button1 - but I'd like to know how
to get it fixed to the right of button1 by 5px.
A key requirment is that buttons 3,4 are seperated by 5px and appear
to float together (not ever overlap)...


I've tried the following CSS - it works in IE but in FF the buttons
tops (buttons 3,4) don't align.
Anyone have any suggestions:

..Button1 {
position: absolute;
left: 3px;
top: 3px;
}
..Button2 {
position: absolute;
top: 3px;
margin-left: 10%; /* HOW DO I GET THIS BUTTON TO BE 5x FROM
Button1? */
}
..Button3 {
position: relative;
top: 3px;
margin-left: 43.5%; /* HOW DO I GET Button3,4 TO FLOAT
TOGETHER */
} /* AND STAY TOP ALIGNED AT
5px? */
..Button4 {
position:relative;
top: 3px;
}
..Button5 {
position: absolute;
right: 3px;
top: 3px;
}

 

[Corey Bryant]

Absolute positioning wil cause you some problems. http://www.iwdn.net would
probably be better for this type of question actually.