troubleshooting Question

Don't break unordered list items that are floating left with CSS

Avatar of Brad Bansner
Brad Bansner asked on
3 Comments1 Solution252 ViewsLast Modified:
On this page:

Top row of red buttons markup:

<div id="nav1a" class="redbar">
	<ul class="clearfix">
		<li><a href="international-sales.htm">INTERNATIONAL SALES</a></li>
		<li><a href="us-retailers.htm">U.S. SALES</a></li>
		<li><a href="press-reviews.htm">PRESS/REVIEWS</a></li>
		<li><a href="downloads.htm">DOWNLOADS</a></li>
		<li><a href="contact.htm">CONTACT</a></li>
		<li><a href="shopping-cart.htm">SHOPPING CART</a></li>

Open in new window


div#nav1a ul{position:relative;display:inline-block;height:100%;margin:0 auto;margin-left:13em;padding:0;white-space:nowrap;}
div#nav1a ul li{display:inline-block;float:left;height:100%;border-right:1px solid #9d1e31;}

Open in new window

The "white-space:nowrap" doesn't keep the "float:left" <li> elements from breaking, if you reduce the width of your browser. How can I force them to stay on one line and not mess up the layout?

Any suggestions for improvement would be appreciated.

Thank you!
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros