How do I stop the FLOAT (without extra markup)?


Tags: css,css-float,nav

Problem :

Question:
How do I get what comes after my NAV to not float?

Preface:
I am putting together a little reusable progress-tracker module to be plugged into some tools being built for internal use from within our firewall.
While cross-browser compatibility is nice, we only need to code against Chrome and FireFox. Those are the only browsers officially supported by our tech team.
Also, ANY and ALL suggestions for improvement are always welcome.

The Challenge: FLOATS!!
In order for the arrows to show correctly and behave intuitively, I had to right float the li's.
(by "had", I mean "couldn't think of a better way" :)

In order to prevent the whole nav from floating to the right, I had to left float that.
Now, whatever comes after the nav is right up there in-line with it.

Note:
You can also see and play with 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.



Solution :

I know you said you wanted to keep the markup the same, but you had an issue with using display:inline-block; and having space between the li elements. Here's a working version without the float mess (example). It has :before and :after, each acting as half of the preceding arrow. I've added a :hover style so you can test the hovering and see how to style it yourself.

Note: This does not look as pretty when 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;
}

    CSS Howto..

    How can I get drop-down functionality working with CSS?

    How to position text on bottom?

    css - why my text box is not showing up?

    How to show a div behind navigation on rollover

    Best practice: How to use (repeat) CSS style attributes correctly?

    How to change css by using tag or class name in typescript?

    How can I use a CSS transform to vertically-center two overlapping elements?

    How to change a vertical css menu to a horizontal one

    How to style Text input in jQuery editable

    How do I create CSS only tabs/pages with #hash URLs?

    Use ajax to show-hide only a subset of image

    How to make an element's position absolute in page, despite an ancestor having absolute position

    How to keep CSS class on menu item with dropdown

    How to get content of a specific css column

    How to display last div at top using CSS?

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How to center data table header and data using in bootstrap w/o using CSS?

    How to update a div with another image in angular?

    How to align image and text for my html/css

    How to change when Jquery edits my CSS upon reaching an anchor point?

    Taking var with JS prompt - how can I make it through HTML form?

    How to write CSS selector for this page?

    How to get only the last ul of specific id on page via CSS :last-child property?

    How to stack a div absolutely on top of table cells

    How to make better CSS ID rules

    How to exclude specific the form from the css applied to body [duplicate]

    How do I get my Bootstrap webpage to have a full width

    Is this how CSS LESS and SimpLESS work? [closed]