Fixed Elements next to eachother

[GreenFanta]

Hello Friends!

Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:

<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>

(yes they're all image buttons for good reason)

but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?

HTML

<div id="top">
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
</div>

CSS

#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }

Init function (runs on $(document).ready())

	$('a.button').animate({
			height: '+=5px',
		  }, 20, function() {
	$('a.button').animate({
			opacity: 0.6,
			height: '-=5px',
		  }, 20);
		  });

Thanks

[xelawho]

... and this is not a css question why?

[GreenFanta]

It is a CSS Question, sorry about that, must've selected the wrong section by mistake.