div'y w CSS, co robię nie tak, że się rozjeżdza?

pytanie zadane 7 lutego 2018 w HTML i CSS przez Konfeusz Bywalec (2,810 p.)

Tworzę zwykły szablon z nagłówkiem, ciałem które zawiera 3 divy i stopką.

Dlaczego prawy div zjeżdza mi pod ciało w którym powinno być zawarte?

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>test css</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .gora {
            height: 50px;
            width: 100%;
            background-color: aqua
        }
        .lewa {
            width: 150px;
            float: left;
            overflow: hidden;
            position: relative;
            background-color: #3e9390;
        }
        .srodek {
            margin-left: 150px;
            margin-right: 150px;
            background-color: #6653fa;
        }
        .prawa {
            width: 150px;
            float: right;
            overflow: hidden;
            position: relative;
            background-color: #facd53;
        }
        .dol {
            clear: both;
        }

    </style>
</head>

<body>
    <div>
        <div class="gora">gora</div>
        <div class="lewa">lewa</div>
        <div class="srodek">srodek</div>
        <div class="prawa">prawa</div>
        <div class="dol">dol</div>
    </div>
</body>
</html>

Proszę o sugestię, magikiem nie jestem, więc może popełniam szkolny błąd.

Dzięki z gówry za pomoc.

1 odpowiedź

odpowiedź 7 lutego 2018 przez gremlin Dyskutant (7,600 p.)

bo środek nie ma nadanego float, a powinien

komentarz 7 lutego 2018 przez Konfeusz Bywalec (2,810 p.)
edycja 7 lutego 2018 przez Konfeusz

jeśli daje środkowi float: left, wówczas komórka dostaje kolejnego marginesu i nie obejmuje całej powierzchni środka. A chodzi mi o to, by lewy i prawy miały stałą szerokość, a środek wypełniał się z automatu, tak by wypełniał całą pozostałą część w środku.

Dlatego prawy float ma na right.

komentarz 7 lutego 2018 przez gremlin Dyskutant (7,600 p.)

to sugeruję raczej w ten sposób:

.lewa {
            width: 150px;
            float: left;
            background-color: #3e9390;
        }
        .srodek {
            width: calc(100% - 300px);
            float: left;
            background-color: #6653fa;
        }
        .prawa {
            width: 150px;
            float: left;
            background-color: #facd53;
        }

Dodatkowo dodałbym box-sizing: border-box; do tych divów co byś mógł wygodnie padding dodawać.

1	komentarz 7 lutego 2018 przez Konfeusz Bywalec (2,810 p.) Dziabie :). Wielkie dzięki, nie znałem tego parametru calc. Wielkie dzięki raz jeszcze.