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

CSS

Posted by sakatagintoki
sakatagintoki
12,624 Points

Aligning some of my navbar items to the left, and others to the right

Fairly rookie question but I'm quite puzzled. See the picture.

navbarproblem

I'm trying to align the first item on my navbar 'Alys', to the left while aligning everything else ('Contact', 'About', 'Shop') to always appear on the right of the navbar.

I've tried using nth-child to select my second and subsequent list items, and floating them to the right, but that reverses the order of the list items.

I've searched for solutions all over the interwebs but said solutions are quite bizarre. Some people suggest splitting the navbar into two separate divs, or just adding a lot of extra padding and margin to the very first item on the navbar. I'm not sure that's good practice and might create further problems down the line.

Your thoughts?

Thx ~Jay

4 Answers

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

It simple as it sounds :) You want the first one to align left and all the others to the right, So i would write it like that:

nav ul li:first-child { float: left; }

nav ul li { 
  list-style:none;
  margin:10px;
  float: right; 
}
sakatagintoki
sakatagintoki
12,624 Points

I ended up using your suggestion, so you get Best Answer. I tip my fedora to you goodsir. Thanks to all, all the same.

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Alys is your logo? If so, you don't need to make it a list item, just make an h1 and float the unordered list to the right. If not, make 2 different unordered list!

Phil Arnold
Phil Arnold
11,331 Points
Phil Arnold
Phil Arnold
11,331 Points

Hi, you could try grouping your nav items that you want positioning left and right in to to different unordered list items. You could then float them accordingly.

<nav>
  <ul class="title-area"><!-- float this left -->
    <li>...</li>
    <li>...</li>
  </ul>
   <ul class="nav-items"><!-- float this right-->
    <li>...</li>
    <li>...</li>
  </ul>
</nav>

Both navigation items would still form part of one nav item, hope this helps as a starter :)

sakatagintoki
sakatagintoki
12,624 Points
sakatagintoki
sakatagintoki
12,624 Points

All of these suggestions sound more plausible than what I've read elsewhere on the interwebs. I'm a bit out of practice with CSS. I'll remember everything soon. ;_;

Thanks all.