Добрый вечер. Есть шапка
Как сделать первую колонку с лого не тянущуюся, вторая (по середине) жмется... как высчитать ее процент? третья тоже фикс ширина.
сделал так:
<header class="header clearfix">
<div class="logo"><a href="/"><img src="http://placehold.it/188x92" alt="аква96"></a></div>
<div class="slogan">
<div class="slogan-special">кнопка</div>
<p class="slogan-text">Бассейны, сауны, турецкие бани.Поставка оборудования, строительство, консалтинг.</p>
</div>
<div class="contact">
<p class="contact-city">г. Екатеринбург ул. 8 марта 4 оф. 330</p>
<p class="contact-tel">+7 (343) 202-04-08(07)</p>
<p class="contact-text">Не дозвонились?</p>
<a href="" class="contact-zakaz">Закажите звонок</a>
</div>
</header>
.logo {
float: left;
/*width: 18%;*/
width: 188px;
}
.logo img {
width: 100%;
max-width: 188px;
margin-top: 10px;
}
.slogan {
width: 61.913043479%;
float: left;
text-align: center;
}
.slogan-special {
width: 233px;
height: 36px;
display: inline-block;
background: url(../img/b1.png);
}
.slogan-special:hover {
cursor: pointer;
}
.slogan-text {
margin-top: 20px;
color: #000;
text-align: center;
max-width: 385px;
margin: 20px auto;
margin-bottom: 0;
}
.contact {
/*width: 22%;*/
width: 250px;
float: left;
color: #000;
display: inline-block;
margin-top: 10px;
}
.contact-city {
font-size: .9rem;
}
.contact-tel {
margin-top: 5px;
font-size: 1.5rem;
font-weight: bold;
}
.contact-text {
margin-top: 10px;
font-size: .9rem
}
.contact-zakaz {
margin-top: 3px;
font-size: .9rem;
color: #2F99E7;
padding-left: 20px;
background:url(../img/phone.png) no-repeat;
}
Как мне высчитать в процентах ширину среднего блока чтобы при сжатии экрана блоки не падали...
Сделал по формуле 188/1150 = 16.347826087% 250/1150 = 21.739130434% 38,086956521 − 100 = 61,913043479 - ширина среднего блока... но вот почему то всё равно ему не нравится и последний блок не влезает и падает.... что я делаю не так? буду очень благодарен! спасибо!
