CODEWITHSUNDEEP
csslist
Nate Gines
Nate Gines

Reputation: 345

Display UL List Horizontally

I am trying to make my subnav list display horizontally rather than stacked. I have tried a few different things, but I cant figure it out. I have tried to use Float, but it messes with the width of the divs below it. Not sure why this happens.

Can anyone help me?

http://jsfiddle.net/9bued/1/

Upvotes: 0

Views: 434

Answers (3)

osselosse
osselosse

Reputation: 149

just add to your CSS : display: inline-block;

Upvotes: 0

skybondsor
skybondsor

Reputation: 747

Delete the width limitation as Habib suggested, then add a clearfix class to the containing ul. 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }

/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

The styles for the clearfix should always go at the bottom of your style block or style sheet.

Upvotes: 0

Habib MAALEM
Habib MAALEM

Reputation: 143

Delete the width limitation (width: 10em;) in #navwidth

Upvotes: 1

Related Questions