Hi, This is my first post here. I'm working on adding a horizontal navigation menu to the top of my company's website. I've got it working pretty well the way I want, but I'm having issues with the links wrapping. They will wrap if the browser window or screen resolution is too small, and they also seem to wrap in some browsers.
I have two images placed in their own divs on the left of the page (basically a title and address header). The horizontal menu is floated to the right of these. It is supposed to fill to the right edge of the browser (works on most, but not all browsers).
If anyone can take a look and help me fix the wrapping problem and how to stretch the menu to the right in all browsers, I'd really appreciate it!
Don't know if you got sorted with your problem but if not here goes.
Set your menu container to width:100% - that should stretch it across the page.
To prevent the text wrapping you could give each tab the width needed for the longest of your list items or you can shrink the text to fit the tab but that will look unpleasant to the eye.
You shouldn't use the white-space attribute for list items. The white-space attribute allows you to prevent text from wrapping until you place a break <br /> into your text. It's best used for paragraphs of text.