Правое Div Неправильно Выравнивает Left 25% от страницы

Question

Я пытаюсь центрировать один div в ответ, обернув его между двумя divs - centerdiv и sidedivs.

Код:

.overmiddlediv { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 
.sidedivs { 
 
    width: 25%; 
 
    float: left; 
 
    padding-left: 50px; 
 
    background-color: red; 
 
} 
 
.centerdiv { 
 
    width: 50%; 
 
    float: left; 
 
    background-color: white 
 
}

<div class="overmiddlediv"> 
 
    <div class="sidedivs"> 
 
    <p>Left side</p> 
 
    </div> 
 
    <div class="centerdiv"> 
 
    <p>This is the middle and is 50%</p> 
 
    </div> 
 
    <div class="sidedivs"> 
 
    <p>Right side</p> 
 
    </div> 
 
</div>

JSFiddle at this link shows the output и это неверно, так как правая сторона находится на левой стороне, когда он должен быть справа от белой части, а также должны быть 25 %.

Я играл с удалением float:left на .sidedivs и пробою абсолютную позицию, но безуспешно. Что странно, так это то, что я использовал ту же структуру кода для нижнего колонтитула, и он работал точно так же, как и должен - разделение каждой части на 25% -50% -25%, но на этом этого нет, и я не знаю, чего мне не хватает.

See this JSFiddle, где все левые элементы и теги p были удалены.

Answer 1

Добавьте к этому CSS, так что ваши процентные значения не влияют/изменены отступов и полей:

html, body { 
    margin: 0; 
} 
* { 
    box-sizing: border-box; 
} 

https://jsfiddle.net/hkq7ttvj/1/

Answer 2

Вы должны установить box-sizing:border-box: https://jsfiddle.net/v9f1qbng/1/ в противном случае ширина добавляется обивка размер.

Answer 3

Снимите прокладку с использованием sidedivs или:

* { 
    box-sizing: border-box; 
} 

Пересмотренный fiddle

Прочитайте эту answer чтобы узнать больше о border-box.

Или вы должны настроить распределение ширины 25%-50%-25%, используя calc, чтобы предотвратить обертывание.