How to change the order floated elements?

11,787

Solution 1

Using display: inline on <li>'s can cause problems, especially if you're eventually going for dropdown menus. I'd recommend something similar to this (only floats show, you know what other styles you want to add):

#extMenu { float: right; }
#extMenu li { float: left; }

So the menu itself will float to the right, while the menu items will float to the left.

Another solution would be to simply reverse the order of your <li>'s

Solution 2

Try this

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}

Solution 3

Why did you choose to float to the right? Floating multiple items to the right means the first item will be the most right item and the last floated item will be on the left of your items.

The align your menu to the right and have your items on one line i would use this:

#extMenuBlock {
    text-align: right;
}
#extMenuBlock ul#extMenu {
    list-style:none; padding:0; margin:0;
}
#extMenuBlock ul#extMenu li {
    display: inline-block; padding:5px;
}

Solution 4

What you really want to do is make each li element an inline element, and float the ul as a whole to the right (or use text-align: right, if you prefer).

New CSS:

#extMenuBlock {
    float:right;
}
#extMenuBlock ul#extMenu { 
    list-style:none;
    padding:0;
    margin:0; 
}
#extMenuBlock ul#extMenu li { 
    display:inline;
    padding:5px; 
}

Solution 5

My variation on the answer - no floats at all.

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}
Share:
11,787

Related videos on Youtube

Starx
Author by

Starx

Website | Careers | GitHub | Freelancer | Odesk | Facebook | Google+ | Twitter | YouTube | Blog Stackoverflow* Top member from Nepal: 2011 &amp; as of March 2012 1st User from Nepal to reach 15K+, 20K+, 25K+, 30K+ on Stackoverflow to get Silver Badge in php (182th world wide), jquery (134th world wide) Projects: jQuery Fancy Menu [git] jQuery Tiny Highlighter [git] Stackexchange

Updated on April 25, 2022

Comments

  • Starx
    Starx almost 2 years

    I hardly use float:right in my css and now I did and came across a annoying problem. I am floating my menu items to the right

    my HTMl

        <ul id="extMenu">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Feedback</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    

    my CSS

        #extMenuBlock {
        }
            #extMenuBlock ul#extMenu { 
                list-style:none;
                padding:0;
                margin:0; 
            }
            #extMenuBlock ul#extMenu li { 
                float:right;
                padding:5px; 
            }
    

    Now when the items are float, I receive my menu is this order Contact Feedback Home, but I want them in opposite order ie Home Feedback Contact

  • Starx
    Starx almost 14 years
    @sohnee, this is definately a better solution than that of @dDejan, avoiding float, but the padding problem still remains. Why is the top and bottom padding being avoided? Got an answer
  • stefanglase
    stefanglase almost 14 years
    @Starx: See my answer, thats why I am using display:inline-block and not display:inline. You cannot give inline elements any padding.
  • Starx
    Starx almost 14 years
    Thanks for this alternative, But my actual question is still unanwered, How to change the ORDER of the floated element?
  • Starx
    Starx almost 14 years
    Thanks for this alternative, But my actual question is still unanwered, How to change the ORDER of the floated element?
  • Fenton
    Fenton almost 14 years
    @Starx - which padding in particular. I'm working in Firefox and if I increase the padding: 5px, I see the padding increase on screen. I should be able to answer if you let me know the exact padding issue. Cheers.
  • Fenton
    Fenton almost 14 years
    "Using display: inline on <li>'s can cause problems" - I'd be interested in hearing more detail on this, perhaps reference a source for this.
  • Starx
    Starx almost 14 years
    @cmm, no vertical padding dude, how to preserve it
  • Starx
    Starx almost 14 years
    @sohnee, Vertical padding ie top and bottom
  • Starx
    Starx almost 14 years
    +1 @Ryan, Nice one. This works and is IE compatible. But I would like to hear something related to changing the order of the floated elements
  • Fenton
    Fenton almost 14 years
    You could solve that by adding the same padding to the UL: ul#extMenu { padding: 5px 0; ...
  • Ryan Kinal
    Ryan Kinal almost 14 years
    Re: Sohnee - w3.org/TR/REC-html40/struct/global.html#h-7.5.3 "Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements." Since the &lt;li&gt;'s are now inline, they can't contain block elements, like &lt;div&gt;'s and &lt;ul&gt;'s.
  • Ryan Kinal
    Ryan Kinal almost 14 years
    Re: Starx - Yeah, I was looking for a way to change the order, but I don't think it's actually possible, as floated elements "stack up" on each other. The only real way to change the order is to switch up the HTML, which isn't always possible.
  • Fenton
    Fenton over 13 years
    @Ryan Kinal - the example in the question does not contain any block level elements inside of the list item elements, meaning you are coding to a complexity that does not exist.
  • Ryan Kinal
    Ryan Kinal over 13 years
    @Sohnee True. I was, however, coding in a forward-thinking manner. If, at some point in the future, a dropdown needs to be added, then this code will not break.