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

Ray Thomas
Ray Thomas
11,914 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!

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
203,990 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;
}