Hello. I need to make a menu with icons to stay to the right of the Header. The icons are divs with background-image, and the measurements are relative and in percentage (%). The idea is that the icons grow according to resolution. I have a search box on the left side of the menu with the display: inline-block property, and its container with text-align: center to always leave the search field in the center. The problem is that when I declare the float: right to the icon menu, the icons do not grow according to the declared percentage. When I shoot the float: right, then yes, the icons grow as the percentage measures, but it does not stay to the right of the screen. Here is the image and codes:
/* Container do Comp. SearchBox */
.header__boxSearch {
height: 30px;
width: 19.53125%;
min-width: 180px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
display: block;
}
/* SearchBox */
.boxSearch {
height: 100%;
width: 100%;
}
.boxSearch__input {
height: 100%;
width: 75%;
float: left;
border-radius: 2px 0 0 2px;
border: 1px solid #dbdbdb;
}
.boxSearch__btn {
background-color: #f8f8f8;
padding-top: 2px;
width: 25%;
height: 100%;
border: 1px solid #dbdbdb;
border-left: none;
border-radius: 0 2px 2px 0;
cursor: pointer;
}
/* Container do menu icon e icones */
.iconsHeader {
width: 15.13671872%;
margin-top: -30px;
margin-bottom: 10px;
min-width: 170px;
float: right;
}
div[class*="navIcon"] {
width: 2.44140625%;
min-width: 25px;
min-height: 25px;
padding-bottom: 2.44140625%;
margin-left: 9.765625%;
float: left;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.navIcon--Feed {
background-image: url(../img/feed.png);
}
.navIcon--Profile {
background-image: url(../img/perfil.png);
}
.navIcon--Notification {
background-image: url(../img/notificacao.png);
}
.iconOut {
width: 1.46484375%;
min-width: 15px;
min-height: 15px;
padding-bottom: 1.46484375%;
margin-left: 9.765625%;
float: left;
background-image: url(../img/sair.png);
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
}
<!-- SearchBox -->
<div class="header__boxSearch">
<div class="boxSearch">
<input type="text" class="boxSearch__input" placeholder="Pessoas..."/>
<button class="boxSearch__btn">
</button>
</div>
</div>
<!-- Menu de icones -->
<div class="iconsHeader">
<div class="navIcon--Feed">
</div>
<div class="navIcon--Profile">
</div>
<div class="navIcon--Notification">
</div>
<div class="iconOut">
</div>
</div>