Как высчитать блок и сделать адаптивно?

Question

[vovkka]

Добрый вечер. Есть шапка Как сделать первую колонку с лого не тянущуюся, вторая (по середине) жмется... как высчитать ее процент? третья тоже фикс ширина.
сделал так:

<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">[phone](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 - ширина среднего блока... но вот почему то всё равно ему не нравится и последний блок не влезает и падает.... что я делаю не так? буду очень благодарен! спасибо!

Answer 1

[iBird Rose]

для ширины среднего блока задать:

.block {
    width: calc(100% - 500px); //где 500px это сумма правого и левого блока в пикселях
}

Answer 2

[Андрей Федоров]

Может хватит уже считать? Используйте flex.

Comments

[Сергей delphinpro]

таблица тоже проканает.

[Андрей Федоров]

Сергей: Только до тех пор пока нужно будет адаптировать для мобильных...

[Сергей delphinpro]

Андрей Федоров: Под таблицей я имел ввиду свойства display - table, table-cell. Никаких проблемтут при адаптации не возникает.
Но, даже, если вдруг(!) вы используете таблицу (тег table), то она так же просто адаптируется под мобильные изменением свойства display на block (или другое, по обстоятельствам)

[Андрей Федоров]

Сергей: ок, и нафига этот геморой? используйте flex )

[Сергей delphinpro]

Андрей Федоров: не спорю

Answer 3

[kozavr]

А с процентами почему не хотите? Даете по 20% на крайние блоки и 60% на центральный. Вполне все хорошо работает вроде. Или то же самое, но с vh.