How to float 3 LI's to the left and 3 to the right and maintain original sequence?


Tags: html,css,css3,flexbox

Problem :

I have a list of 6 list items. Each item's width is only 5% of the total UL. I'm trying to get the remaining 60% of empty space to appear after item 3.

I've attempted by floating items 4,5 & 6 to the right. But that causes them to appear out of sequence. They appear backwards as 6,5 & 4.

How i can achieve the desired results? This is a simplified version. Setting item 3 as width 65% is not an option!

Goal: 1,2,3 60% empty space 4,5,6

<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>

<li class="b">4</li>
<li class="b">5</li>
<li class="b">6</li>
</ul> 

As stated the below CSS does not work

ul#six-items {
list-style-type:none;
width:100%;
}   

li {
width:5%;
}   

li.a {float:left}

li.b {float:right}


Solution :

HTML

<ul>
    <li class="a">1</li>
    <li class="a">2</li>
    <li class="a">3</li>
    <li class="b b4">4</li>
    <li class="b">5</li>
    <li class="b">6</li>
</ul>

CSS

ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
}   

li { width: 5%; }   

li.b4 { margin-left: auto; }

DEMO: http://jsfiddle.net/y8y2edb6/


    CSS Howto..

    How to make round corners to both inside of a box and its border?

    CSS - How to add a glow effect around a fluid box?

    How to make div inside table same size as text inside a?

    Not floating on same line, how to fix css

    How to insert css arrow into html page and make it clickable

    How to make input placeholder text not opaque when the text field background is opaque

    How to show a small image to the right of a div with CSS?

    How to align

    and tags side-by-side?

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    How to make transition effect on css sprite hover

    How to use Bootstrap CDN?

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    how can assign left of div to left of screen when margin set to auto?

    Hide the element, but show for that place blank

    How can I force an image to display in its entirety with CSS?

    How to insert HTML symbol after Bootstrap panel-heading in CSS?

    How to pre-complie css style sheets in rails 2.3?

    How to show an image on html page using only css?

    How does CSS resize images?

    How can I specify a *.css file in an ASP.NET UserControl?

    How to preload large css and javascript files in vanilla javascript

    How to change or remove quote symbol in css

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to make the header part of the site as low as the logo?

    How to remove extra space in navigation bar? [duplicate]

    How do I make the mobile view of my website not show certain elements?

    How to make an external HTML file not appear in the home page?

    How do I make CSS take into account a sidebar with absolute positioning

    how to style a symfony2 form button

    How to use JavaScript to Alter CSS for Multiple Elements