Search code examples
htmlcssalignmentnavbar

Navbar align part right part left errors

I'm trying to create a navbar with some items on the left and some items on the right (Item 1 on the left, items 2 and 3 on the right). My JSFiddle has my current code.

What I have tried to fix this issue:

  • float: right
  • text-align:right

None of them seem to work. I'm sure there is a super simple solution, but I just can't think of it.

HTML:

<div class="navbar">
        <!--Create the button home -->
        <p class="innav">Num1</p>
        <p class="HL">|</p>
        <p class="rightIn">Num2</p>
        <p class="HL">|</p>
        <p class="rightIn">NUM 3</p>
        <p class="HL">|</p>

</div>

CSS:

div.navbar{
width:100%;
height: 30px;
background-color: #03572c;
}

p{
    display: inline;
}

p.innav{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
p.rightIn{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;

}
.HL{
margin-left: 10px;
color:white;
font-size:24px;

}

JSfiddle

Any help would be greatly appreciated! :)

Solution

  • Add these style to your css.

    p.rightIn,
p:nth-child(4),
p:nth-child(6)
{
    float: right;
    margin: 0px 5px;
    width: auto;
}

    Jsfiddle