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 CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Posted by PARAG SHARMA
PARAG SHARMA
Courses Plus Student 2,383 Points

How can I set the position of horizontal navigation bar to right without using margin like float: right?

By setting display property of "container" class to inline and setting its margin-left property to 40% it can be done or 2nd way is by setting margin-left property of "name" class to 300px. But I think these are not the best solution. I tried using float property but margin collapsed, Can anybody give the best solution for this problem?

PARAG SHARMA
PARAG SHARMA
Courses Plus Student 2,383 Points

I also find another way but it is not complete sol. By setting the float property of "container" class to right and then increasing the padding-bottom property of "main-header" to 4 em it can be done but the only problem is that the navigation bar is not shifted to left side as much I expected. It appears to be at the center... why?

2 Answers

Ray Thomas
Ray Thomas
12,478 Points
Ray Thomas
Ray Thomas
12,478 Points

Can you post your code for us please? It will help us to see what's going on and point you in the right direction :) I would look into flex-box. Flex-box has shifted developers more away from floats and toward dynamic positioning.

Let me know if I can be of service!

PARAG SHARMA
PARAG SHARMA
Courses Plus Student 2,383 Points

I want to move the navigation bar to right side using flex (which you have suggested me). Here is the screenshot :- Imgur

HTML code snippet:-

<header class="main-header">
            <div class="container">
                <h1 class="name"><a href="#">Best City Guide</a></h1>
                <ul class="main-nav">
                    <li><a href="#">ice cream</a></li>
                    <li><a href="#">donuts</a></li>
                    <li><a href="#">tea</a></li>
                    <li><a href="#">coffee</a></li>
                </ul>
            </div>
        </header>

CSS code snippet :-

.main-header {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

.container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }

.name,
.main-nav,
.main-nav li {
    display: inline-block;
  }
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The float will do what you want, just apply a "clearfix" to prevent collapse:

.main-nav {
  float: right;
}
header::after {
  display: block;
  content: "";
  clear: both;
}