Problem with percentage and float: right

0

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>
    
asked by anonymous 18.05.2017 / 00:19

0 answers