When you resize the width of the browser, the elements drop underneath each other in the header. How would i prevent this from happening? Will i need to use the min-width property somewhere?
Normally I put a min-width setting in the body for gecko browsers. I would suggest
min-width:765px for yours
and in the overall page container div set a width if you can (for IE) at the same width. This also helps centering the design in gecko browsers. Bonus. Not that you need it, but useful to remember.
you can also try white-space: nowrap
Thanks guys, fixed my problem.