CODEWITHSUNDEEP
htmlcsshtml-lists
user3196375
user3196375

Reputation: 31

How to have an unordered list float to right?

I'm having issues with a little feature on my site's products' page 'tools' bar. I want to have it float to the right of my site's breadcrumb navigation, making it inline with the breadcrumb navigation. But it's going to the next line.

Here's what it looks like:

<div id="breadcrumbsForStore">
<h5>

<a href="/" title="store home">Home</a>
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
<a href="{{ page.full_url }}" title="{{ page.name }}">{{ page.name }}</a>
</h5>
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
</div>

And here's the CSS:

#breadcrumbsForStore{width:960px; font-family: futura; text-align:left;margin:20px 0px 25px 0;padding:0px 0 5px 0;clear:both; margin-left: auto; margin-right: auto; text-transform:uppercase;}
#breadcrumbsForStore h5{font-size:10px; font-family: futura;}
#breadcrumbsForStore h5 a{color:#525252; border-bottom:0px dotted #0d0d0d; letter-spacing:1px; padding: 10px 3px 10px 3px;}
#breadcrumbsForStore h5 a:hover{color: #0d0d0d;}
ul#shoptools{float:right; display:inline;}
ul#shoptools li{float:left; display:inline;}

Here's where the problem is (it says "SIZE GUIDE / FILTER:") http://shopmoonfall.bigcartel.com/products

Upvotes: 1

Views: 468

Answers (3)

shenku
shenku

Reputation: 12448

Change your html like this:

<div id="breadcrumbsForStore">
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
<h5>
<a href="/" title="store home">Home</a>
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
<a href="{{ page.full_url }}" title="{{ page.name }}">{{ page.name }}</a>
</h5>
</div>

Upvotes: 2

lordflapjack
lordflapjack

Reputation: 31

I'm not 100% clear on what your trying to do but the way you nested the <h5> is kinda ugly.

If you want the <ul> on the same line as the <a> tags you should include the <ul> in the <h5> tag.

If you don't want to include the <ul> in the <h5>, make sure the <h5> is display: inline; also. All elements on the "line" must be display: inline/inline-block; for it to appear on one line. Headers are display: block; by default so the <h5> is pushing down the unordered list.

Upvotes: 0

Mike
Mike

Reputation: 430

The H5 element is display:block style by default. If you add a style to make it inline, like 

 h5 {display: inline-block}

then floating elements will show next to it.

Fiddle here: http://jsfiddle.net/t84yU/

(note I changed your width from 960 px to 560 px also, just to make it more readable)

Upvotes: 1

Related Questions