How to stop FLOAT (no extra markup)?

Question

Question :
How to get what comes after my NAV , so as not to swim?

Introduction:
I am building a small reusable progress tracking module that needs to be connected to some tools that are created for internal use from our firewall.
While cross-browser compatibility is good, we need encode against Chrome and Firefox. These are the only browsers officially supported by our technical team.
In addition, ANY and ALL suggestions for improvement are always welcome.

Task: FLOATS !!
In order for the arrows to display correctly and behave intuitively, I had to edit using li .
(from "had", I mean "could not think of a better way" :)

To prevent the whole NAV from moving to the right, I had to leave a float. Now, no matter what happens after the navigation is right there, enter it.

Note:
You can also see and play the code here on jsFiddle .

Code:
HTML:

 <nav id="progress_tracker"> <ul> <li><a href='#'>Grab a beer</a></li> <li><a href='#'>Work a little more</a></li> <li><a href='#' class="current">Take a Nap</a></li> <li><a href='#' class="complete">Work like a dog</a></li> <li><a href='#' class="complete">Grab a coffee</a></li> </ul> </nav> 

CSS

 nav { float: left; } nav#progress_tracker { padding: 0.25em; background-color: #1a3340; border-radius: 1.75em; } nav ul li:last-child{ /* Remember. We are floating right, so last is furthest left */ margin-left: -1.7em; } nav ul{ list-style-type: none; } nav ul li{ display: inline-block; float: right; position: relative; padding: 0; margin: 0; } nav ul li a{ display: inline-block; vertical-align: middle; color: #777; background-color: DDD; padding-top: 0.75em; /* top/btm padding need to be half of line-height */ padding-bottom: 0.75em; /* top/btm padding need to be half of line-height */ padding-left: 2em; /* left padding */ padding-right: 1em; /* right padding is (left-padding - depth-of-arrow (see below) */ line-height: 1.5em; /* line-height needs to be double top/btm padding */ } nav ul li a:after{ width: 0; height: 0; position: absolute; top: 0; right: -1em; /* depth of offset (equal to depth of arrow) */ border-left: 1em solid #d9d9d9; /* depth of arrow (equal to depth of offset) */ border-top: 1.5em inset transparent; /* border thickness needs to match line-height */ border-bottom: 1.5em inset transparent; /* border thickness needs to match line-height */ content: ""; /* required to make all of this work */ } nav ul li a:visited{ color: #888888; } nav ul li a.current{ font-weight: bold; color: #777; background-color: #FFBB00; } nav ul li a.current:after{ border-left: 1em solid #FFBF00; /* depth of arrow (equal to depth of offset) */ } nav ul li a.complete{ color: #666; background-color: #FFFFEE; } nav ul li a.complete:after{ border-left: 1em solid #FFFFEF; /* depth of arrow (equal to depth of offset) */ } nav ul li:last-child a{ /* Remember. We are floating right, so last is furthest left */ border-top-left-radius: 1.45em; border-bottom-left-radius: 1.45em; } nav ul li:first-child a{ /* Remember. We are floating right, so first is furthest rt */ border-top-right-radius: 1.45em; border-bottom-right-radius: 1.45em; } nav ul li:first-child a:after{ border: none; } 

Thanks-a-bunch.

Answer 1

I know that you said you want to keep the markup the same, but you are having a problem using display:inline-block; and a space between the elements li . Here is the working version without float mess ( example ). It has :before and :after , each of which acts as half of the previous arrow. I added a :hover style so that you can check the hover and see how to style it yourself.

Note. It does not look so beautiful when you are wrapped.

HTML

 <nav id="progress_tracker"> <ul> <li><a href='#' class="complete">Grab a coffee</a></li><!-- --><li><a href='#'>Work like a dog</a></li><!-- --><li><a href='#' class="complete">Take a Nap</a></li><!-- --><li><a href='#' class="current">Work a little more</a></li><!-- --><li><a href='#'>Grab a beer</a></li> </ul> </nav> <p>Some random text</p> 

New CSS

 a:hover, a:hover:before, a:hover:after { background:lime !important; } nav#progress_tracker { display:inline-block; padding: 0.25em; background-color: #1a3340; border-radius: 1.75em; overflow:hidden; } nav ul{ list-style-type: none; } nav ul li{ display: inline-block; position: relative; padding: 0; margin: 0; } nav ul li a{ display: inline-block; vertical-align: middle; color: #777; background: #1A3340; padding-top: 0.75em; /* top/btm padding need to be half of line-height */ padding-bottom: 0.75em; /* top/btm padding need to be half of line-height */ padding-left: 1em; /* left padding */ padding-right: 1.5em; /* right padding is (left-padding + 1/2 depth-of-arrow (see below) */ line-height: 1.5em; /* line-height needs to be double top/btm padding */ } nav ul li a:before, nav ul li a:after { width: 1em; height: 1.5em; position: absolute; left: 0; content: ""; /* required to make all of this work */ background: #1A3340; } nav ul li a:before{ top: 0; -webkit-transform: skewX(33deg) translate(-50%); -moz-transform: skewX(33deg) translate(-50%); transform: skewX(33deg) translate(-50%); } nav ul li a:after{ bottom: 0; -webkit-transform: skewX(-33deg) translate(-50%); -moz-transform: skewX(-33deg) translate(-50%); transform: skewX(-33deg) translate(-50%); } nav ul li a:visited{ color: #888888; } /* .current styles */ nav ul li a.current{ font-weight: bold; color: #777; background-color: #FFBB00; } nav ul li a.current:before, nav ul li a.current:after{ background: #FFBF00; } /* .complete styles */ nav ul li a.complete{ color: #666; background-color: #FFFFEE; } nav ul li a.complete:before, nav ul li a.complete:after{ background: #FFFFEF; } /* First/last fixes */ nav ul li:first-child a { border-top-left-radius: 1.45em; border-bottom-left-radius: 1.45em; } nav ul li:last-child a { border-top-right-radius: 1.45em; border-bottom-right-radius: 1.45em; } nav ul li:first-child a:before, nav ul li:first-child a:after{ background: none !important; } 

Answer 2

It seems a little kludgey, but without adding markup you can set the css style on p-elements as such:

 p { clear:both; } 

http://jsfiddle.net/G6J6P/2/

If you're ok with the markup, instead I just do:

 <br style="clear:both;" /> 

after your navigator.

Answer 3

Apply css style

 clear: both; 

next item. This will prevent anything from chicks next to your floating nav .