Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

J.T. Gralka
J.T. Gralka
20,126 Points
Posted by J.T. Gralka
J.T. Gralka
20,126 Points

Reordering <li> elements to float right?

Hey guys,

So, I'm in the process of working on a site for a small family business, and I ran into this slight issue designing the layout for the top menu bar. Essentially, I used Blueprint as a CSS framework, and I wanted to float my list elements to the right within one of my grid cells. Unfortunately whenever I do that, the elements display in the exact opposite order as they were listed in my markup.

I was wondering if anybody ever had this issue before and if there were a better way of styling my ul or li elements to prevent this reordering from taking place. In the past, whenever I've come across an issue like this, I've simply reversed the order of the list items in my HTML, but semantically, that never seemed kosher to me. (Especially because in some cases that means that I have to go back in my style sheet and change up my application of the :last-child pseudo-class to :first-child -- again, a bit confounding semantically!)

To be clear, I suppose I could understand why the list items are showing up in the wrong order when I float them right, I just was wondering if there was an easier work around other than switching around the order of my list items. But with that said, does anybody have any advice on how to fix this issue?

Thanks in advance for any suggestions!

J.T.

P.S. - If it would help, I can code up a quick example using jsFiddle if it would help to illustrate the issue I'm having. Any suggestions would be much obliged! :-)

7 Answers

Matt Harris
Matt Harris
2,762 Points
Matt Harris
Matt Harris
2,762 Points

Hey J.T

You would float the ul to the right, and float the li's to the left. No re-ordering is required. Take a look at this example.... http://jsfiddle.net/mattyharris/EBgQ4/

cheers

Brandon Escalante
Brandon Escalante
5,772 Points
Brandon Escalante
Brandon Escalante
5,772 Points

Hey @J.T. and @Matt - here's what I usually do, I'm not sure if it's correct and would really like to know, seeing it's what I usually do.

Like I said in the fiddle, I really like @Matt's code and whoever out there sees this, I would love to know what route is best, so I can feel at ease using, instead of questioning, haha.

http://jsfiddle.net/brandonesc/5nZab/

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

Hey Matt & Brandon,

Thanks for the advice. I was pretty sure I had to float my ul element to the right, and I wrote an example of what I'm looking to achieve: http://jsfiddle.net/CpXwx/

I'm pretty sure the issue I was experiencing had to do with the fact that I'm using the grid.css stylesheet provided by Blueprint CSS. Originally, when I tried that same approach of floating my list, I get an undesired result, most likely because I wasn't clearing my divs properly. I think I've cleared it up now (no pun intended). I just wanted to double check that I hadn't lost my senses, and it turns out that, in fact, I hadn't! :-)

Thanks again for your help guys! It's much appreciated!

Best,

J.T.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Maybe I'm missing something, but I usually just use:

ul li { display: inline; }

Check out this codepen example

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

James,

Yeah. My issue actually had to do with the way I was displaying my list in conjunction with another framework. I was using a grid layout and was trying to force a block level element to float right while I was floating the li elements inside of it to the left. It turns out that I was applying my grid layout classes improperly and it caused my ul to display incorrectly.

This, boys and girls, is a reminder of why one should always plan his or her CSS out ahead of time before diving right in. Despite this setback, I'm happy to report that after an hour and a half of tweaking, I was able to get everything to display perfectly!

Thanks for the help everyone!

J.T.

Matt Harris
Matt Harris
2,762 Points
Matt Harris
Matt Harris
2,762 Points

Hey All

The beauty of html/css is that there are always a couple of ways of producing the end result. Its just my preference to float li;s for a couple of reasons...

  • lists are block level elements by default.
  • Padding is applied differently to inline elements, I prefer to set them to block level elements so I know it behaves how I want it to :-)

All the best guys.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Matt - Regarding lists and block-level elements, that's what the display: inline-block is for.