Search code examples
htmlcsspositionnav

How to position one element at the right side of the parent div?

I'm making a navigation bar for my website. The last element of the nav should be on the right side of the parent div. (It's the login button).

navigation bar

But as you can see the login button sinks a little bid into the body. It should be on the same line as the other buttons. I tried doing position relative on the parent div (navUl), and position absolute + right:0 in the element. I also tried float right on the element but they both gave me the same result.

My code so far:

html

<body>
        <div class="header">
            <div class="nav">
                <img class="logo" src="images/WEBSHOPlogo.png">
                <div class="lining">
                    <ul class="navUl">
                        <a href="index.html"><li class="currentNavLiHome"> <img class="homeButton" src="images/home-icon.png" alt="home"></li></a>
                        <a href="games.html"> <li class="navLi">producten</li></a>
                        <a href="info.html"> <li class="navLi">informatie</li></a>
                        <a href="admin.html"><li class="navLiLogin"> <img class="adminButton" src="images/icon-user.png" alt="admin"></li></a>
                    </ul>
                </div>
            </div>
        </div>
    </body>

css

body {
    margin: 0px;
}

.header {
    background-color: #594f4f;
}

.nav {
    height: 170px;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 300px;
    margin-top: 50px;
}

.lining {
}

.navUl {
    margin: 0px;
    padding: 0px;
    margin-top: 61px;
    position: relative;   
}

.navLi {
    padding-top: 10px;
    padding-bottom: 1px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1em;
    text-transform: uppercase;
    color: #594f4f;
    display: inline;
    background-color: #45ada8;
    font-family:sans-serif; 
    clear: both; 
}

.currentNavLiHome {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px; 
    background-color: white;
    margin-right: 5px;
    display: inline;   
    clear: both;

}

.homeButton{
    width: 20px;
}

.adminButton{
    width: 20px;
}

.navLiLogin {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;    
    display: inline;
    float: right;


}

.navUl a {
    list-style-type: none;
    text-decoration: none;
}

.loginPosition {
}

Thanks for reading.

Solution

  • It's a little tough without a working fiddle, but give this a shot.

    Updated HTML to put anchor tags inside <li> as that is better syntax:

    HTML:

    <body>
 <div class="header">
      <div class="nav">
           <img class="logo" src="images/WEBSHOPlogo.png">
           <div class="lining">
                <ul class="navUl">
                     <li class="currentNavLiHome"><a href="index.html"><img class="homeButton" src="images/home-icon.png" alt="home"></a></li>
                     <li class="navLi"><a href="games.html"> producten</a></li>
                     <li class="navLi"><a href="info.html"> informatie</a></li>
                     <li class="navLiLogin"><a href="admin.html"><img class="adminButton" src="images/icon-user.png" alt="admin"></a></li>
                </ul>
           </div>
      </div>
 </div>
</body>

    Updated CSS. Basically we float the <ul> and give it a 100% width, then float the <li> left, except float the li:last-child to the right. Also, remove the clear:both from the <li> so they stay inline.

    CSS:

    .nav ul {
     float: left;
     width: 100%;
}
.nav ul li {
     float: left;
}
.nav ul li:last-child {
     float: right;
}

.navLi {
    padding-top: 10px;
    padding-bottom: 1px;
    padding-left: 25px;
    padding-right: 25px;
   margin-left: 10px;
     margin-right: 10px;
    font-size: 1em;
    text-transform: uppercase;
    color: #594f4f;
    display: inline;
    background-color: #45ada8;
    font-family:sans-serif;
}

.currentNavLiHome {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px; 
    background-color: white;
    margin-right: 5px;
    display: inline;
}