CSS CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

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?

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

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!

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
205,347 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;
}