Вариант с flex
, точнее flex-flow: row wrap;
позволит переносить контент если не будет вмещаться. При этом можно задавать ширину как в процентах (как у Вас) так и фикс, если не вместится на опр. разрешении - блоки будут перестраиваться друг под другом:
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
.top {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
#intouch {
font-family: Arial Rounded MT Bold, bold;
width: 100px;
float: left;
border-right: 2px solid #be0000;
border-bottom: 2px solid #be0000;
color: #be0000;
font-size: 20px;
flex-grow:0;
flex-shrink:0;
}
#options {
background: #be0000;
color: #ffffff;
width: calc(100% - 100px);
padding-top: 1.6%;
padding-bottom: 1.6%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
flex-grow:0;
flex-shrink:0;
font-size: 14px;
}
<div class="top">
<div id="intouch">На связи</div>
<div id="options">
<span class="option">Регистрация</span>
<span class="option">Вход</span>
<span class="option">Пожертвования</span>
<span class="option">Контакты</span>
</div>
</div>
Еще если без медиазапросов (@media
), то, как вариант, использовать размер шрифта в vw
или vh
, а то проценты как-то не особо хорошо работают:
* {
box-sizing: border-box;
}
#intouch {
font-family: Arial Rounded MT Bold, bold;
width: 17%;
float: left;
border-right: 2px solid #be0000;
border-bottom: 2px solid #be0000;
color: #be0000;
font-size: 4vw;
}
#options {
background: #be0000;
color: #ffffff;
width: 83%;
margin-left: 17%;
padding-top: 1.6%;
font-size: 3vw;
}
.option {
padding-left: 7%;
}
<div id="intouch">На связи</div>
<div id="options">
<span class="option">Регистрация</span>
<span class="option">Вход</span>
<span class="option">Пожертвования</span>
<span class="option">Контакты</span>
</div>