Почему эти две ширины div равны 100%?

Вот jsfiddle: http://jsfiddle.net/dazakip/u7d59901/Почему эти две ширины div равны 100%?

.nav { 
    float: left; 
    width: calc(100% - 75px); 
    height: 10px; 
    padding-left: 5px; 
    padding-bottom: 10px; 
    background-color: green; 
} 

.checkout{ 
    float: right; 
    width: 75px; 
    height: 10px; 
    padding-bottom: 10px; 
    background-color: red; 
}

Конкретно этот код. Хотите, чтобы два divs сидели рядом друг с другом и оставались вне зависимости от размера. Предварительный просмотр покажет, что я имею в виду.

Спасибо!

источник

2015-12-02 srysry

У вас есть padding-left от 5px, что учитывается при расчете. Если вы удалите или вычислите 5px, это должно быть хорошо!

.nav { 
 
\t float: left; 
 
\t width: calc(100% - 80px); /* add 5px */ 
 
\t height: 10px; 
 
\t padding-left: 5px; /* or remove padding */ 
 
\t padding-bottom: 10px; 
 
\t background-color: green; 
 
} 
 

 
.checkout{ 
 
\t float: right; 
 
\t width: 75px; 
 
\t height: 10px; 
 
\t padding-bottom: 10px; 
 
\t background-color: red; 
 
} 
 

 

 
.lol { 
 
\t 
 
\t height:111110px; 
 
\t background-color:grey; 
 
}

<body> 
 
\t 
 
\t <div class="nav">HOME | MENS | WOMENS</div> \t 
 
\t <div class="checkout">Checkout</div> 
 
\t 
 
\t <div class="lol"></div> 
 
</body>

источник

2015-12-02 00:16:45

ав не так! не могу поверить, что я пропустил это. Спасибо! – srysry

Почему эти две ширины div равны 100%?

ответ

Смежные вопросы