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..

    HTML/CSS showing buttons online and auto going to next line

    How to apply picture for submit button

    How to style Anchor in GWT?

    How to style more than one ul

    How to select only one child element in CSS?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    How to have a sidebar on the right in a responsive page with maximum width?

    Box-shadow is not showing or z-index

    How to change CSS (background-image) from JQuery in Rails?

    How to make Firefox button respect padding?

    css hover image and show icon not show

    How to customize the EditorFor CSS with razor

    How to put the div at the center with css?

    how to make a css gradient stop after so many pixels?

    How do I insert a “close” link in this list

    How to add dynamic CSS style sheet for single xhtml file

    how to code different type of border in css?

    Why is my text not showing in my DIV?

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    On scroll up use the animate() and show the div

    How can I add a border INSIDE this element?

    how can I access a css class from the appended html div?

    How do I add keyboard bindings to carousel functionality? - jQuery

    How does CORS (Access-Control-Allow-Origin header) increase security?

    Sum of two divs widths is greater than parent width. How to make the browser resize the last div instead of moving it to the next line?

    how to center columns group

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    How to write this 'OR' CSS selector?

    how to center two div in xs