CODEWITHSUNDEEP
htmlcss
Alex Deneris
Alex Deneris

Reputation: 173

Aligning separate links tp the right

I have this navigation bar and I want two separate links to the right. But it seems putting float: right; to my div doesn't work. It aligns with the other elements instead. How do we do this?

    /*css*/
    #navigation {
    	background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        color: white;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 46px;
        border-top: 1px solid #6a6a6a;

        .navigation-links-left {
    	    width: max-content;
    	    padding: 15px 0px;
        	border-left: 1px solid #6a6a6a;
        	margin: 0px;
    	    a {
    	    	padding: 15px 16px;
       	 		border-right: 1px solid #6A6A6A;
       	 		margin: -3px;
    	    }
    	}

    	.navigation-links-right {
    		    float: right;
    	}
    }
    <!-- HTML-->
    <div id="navigation">
      <div class="wrapper">
    	<div class="navigation-links-left">
    	<a><img src="images/icon/icon_nav_03.png"></a>
    	<a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
    	<a>인사말</a>
    		<div class="navigation-links-right">
    			<a><img src="images/icon/icon_nav_01.png"></a>
    			<a><img src="images/icon/icon_nav_02.png"></a>
    		</div>
    	</div>
    </div>
  </div>

Upvotes: 0

Views: 55

Answers (2)

jaredgorski
jaredgorski

Reputation: 540

It appears your navigation-links-right element is nested inside your navigation-links-left one. Try bringing it outside:

#navigation {
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    color: white;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46px;
    border-top: 1px solid #6a6a6a;
}

.navigation-links-left, .navigation-links-right {
    width: max-content;
    padding: 15px 0px;
    display: inline-block;
    border-left: 1px solid #6a6a6a;
    margin: 0px;
}

.navigation-links-left a, .navigation-links-right a {
    padding: 15px 16px;
    border-right: 1px solid #6A6A6A;
    margin: -3px;
}


.navigation-links-right {
    float: right;
}
<div id="navigation">
    <div class="wrapper">
        <div class="navigation-links-left">
          <a><img src="images/icon/icon_nav_03.png"></a>
          <a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
          <a>인사말</a>
        </div>
        <div class="navigation-links-right">
          <a><img src="images/icon/icon_nav_01.png"></a>
          <a><img src="images/icon/icon_nav_02.png"></a>
      </div>
    </div>
</div>

I also believe this is a good application for CSS Flexbox:

#navigation {
    background-color: rgba(0,0,0,0.5);
    border-top: 1px solid #6a6a6a;
    bottom: 0;
    color: white;
    height: 46px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.wrapper {
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.navigation-links-left, .navigation-links-right {
    align-items: center;
    border-left: 1px solid #6a6a6a;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.navigation-links-left a, .navigation-links-right a {
    border-right: 1px solid #6A6A6A;
    margin: -3px;
    padding: 15px 16px;
}
<div id="navigation">
    <div class="wrapper">
        <div class="navigation-links-left">
          <a><img src="images/icon/icon_nav_03.png"></a>
          <a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
          <a>인사말</a>
        </div>
        <div class="navigation-links-right">
          <a><img src="images/icon/icon_nav_01.png"></a>
          <a><img src="images/icon/icon_nav_02.png"></a>
      </div>
    </div>
</div>

Upvotes: 0

Rahul
Rahul

Reputation: 4364

you need to apply your div float left and float right see demo below, I have also corrected some html from your code you wrapped navigation-links-right inside your navigation-links-left div so corrected that

/*css*/
#navigation {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
color: white;
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
border-top: 1px solid #6a6a6a;
}
.navigation-links-left {
    width: max-content;
    padding: 15px 0px;
    border-left: 1px solid #6a6a6a;
    margin: 0px;
    float:left;
    }
    a {
        padding: 15px 16px;
        border-right: 1px solid #6A6A6A;
        margin: -3px;
    }



.navigation-links-right {
    float: right;
    padding: 15px 0px;
}
<div id="navigation">
            <div class="wrapper">
                <div class="navigation-links-left">
                   <a><img src="images/icon/icon_nav_03.png"></a>
                   <a>KU 스타트업 <img src="images/icon/icon_nav_04.png">
                   </a>
                   <a>인사말</a>
                </div>
              <div class="navigation-links-right">
                <a><img src="images/icon/icon_nav_01.png"></a>
                <a><img src="images/icon/icon_nav_02.png"></a>
              </div>
                
            </div>
        </div>

Upvotes: 1

Related Questions