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

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Problem with positioning one div element next to another one in Navigation bar.

Hi everyone,

I am experiencing a slight CSS problem with one of the elements in my Navigation bar. To make it simpler to explain please have a look at this screenshot for the reference of what I am trying to achieve: http://d.pr/i/uUse .

As you can see from the screenshot there are two divs (one with navigation links and the other div is a button for changing the language of the website).

Here is the demonstration of the problem (short video): http://d.pr/v/12rj9

My HTML:

...
<div class="pull-right">
          <div id="navbar" class="navbar-collapse">

            <div id="lang-mobile" class="hidden-xs hidden-sm">
              <ul>
                <li class="lang-selected"><a href="#">RU</a></li>
                <li><a href="#">DE</a></li>
                <li><a href="#">ENG</a></li>
              </ul>
            </div>

            <ul class="nav navbar-nav">
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/truck.svg">Автомобильные перевозки</a></li>
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/rail.svg">Железнодорожные перевозки</a></li>
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/ship.svg">Морские перевозки</a></li>
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/customs.svg">Таможенные услуги</a></li>
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/warehouse.svg">Сборные грузы и складирование</a></li>
              <li class="hidden-md hidden-lg"><a href="#"><img class="menu-icons" src="assets/img/icons/menu/dangerous-goods.svg">Перевозка опасных грузов</a></li>
              <div class="nav navbar-nav general-icons">
                <li><a href="#"><img class="menu-icons" src="assets/img/icons/menu/about.svg">О компании</a></li>
                <li class="hidden-xs hidden-sm"><a href="#">Услуги</a></li>
                <li><a href="#"><img class="menu-icons icon-news" src="assets/img/icons/menu/news.svg">Новости</a></li>
                <li><a href="#"><img class="menu-icons" src="assets/img/icons/menu/contacts.svg">Контакты</a></li>
              </div>
            </ul>
          </div>
        </div>
...

MY CSS:

...
    .general-icons {
        line-height: 14px;
        margin: 0;
        padding: 0 100px 0 0;
    }

    #lang-mobile ul {
        display: inline-block;
        /* right: 50px; */
        float: right;
        border: none;
        margin: 0 !important;
        padding: 0 !important;
        width: 100px;
        text-align: center;
    }

Here is the link to my project files if needed: http://d.pr/f/1gDvg

Any suggestions how I could move this "language selector" div to the right side of the main container while keeping the other "navigation links" div to the left side of it as shown at the screenshot above?

Thank you.

2 Answers

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hi Milan Nikolic , thanks for your reply... I actually found a slightly better solution to this issue:

.general-icons {
    line-height: 14px;
    margin: 0;
    padding: 0 60px 0 0;
}

#lang-mobile {
    float: right;
    width: 100px;
}

#lang-mobile ul {
    border: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 100px;
    text-align: center;
  }

I have simply added the width property to the #lang-mobile id, which is the same width as #lang-mobile ul and it worked. Now the second div is located within the main Bootstrap #container. When I shrink or stretch the window, this div remains within the main #container: http://d.pr/v/11Mzn (video).

Milan Nikolic
Milan Nikolic
24,365 Points
Milan Nikolic
Milan Nikolic
24,365 Points

Try this code...

#lang-mobile ul { display:block; position:absolute; right: 20px; top: 10px;
}

for pixel perfect adjust right and top position...