Float: left jak ustawić element blokowy na wysokości dwóch divów

pytanie zadane 26 czerwca 2018 w HTML i CSS przez DominikSkleroza Nowicjusz (120 p.)

Witajcie,

mam problem, by ustawić odpowiednio bloki. Przeryłem forum i znalazłem podobny temat, ale tam były niezamknięte divy. U mnie nie wiem, co nie działa, może źle kombinuję... Poniżej zrzut ekranu jak to wygląda i co chcę osiągnąć. Potrafię nawet przesunąć ten blok metodą float: right, ale nie mogę ustawić, żeby się pokrywał tak jak na obrazku (czerwone kontury kwadratu).

kod HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Strona o niczym</title>
    <meta name="description" content="Strona poświęcona samochodom">
    <meta name="keywords" content="opony, silniki, turbo, licznik">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <link rel="stylesheet" href="main.css">
    <script src="code.js"></script>
</head>

<body>
    <div class="container">
        <div class="eraser"></div>
        <div class="logo"></div>
        <div class="nav"></div>
        <div class="navtwo"></div>
        <div class="menu">
            <div class="menuone"></div>
            <div class="menutwo"></div>
            <div class="eraser"></div>
            <div class="menutree"></div>
            <div class="eraser"></div>
            <div class="menufour"></div>
        </div>
    </div>
</body>

</html>

Oraz CSS

body {
    background-image: url(img/christmas-dark.png);
    margin: 0;
}

.container {
    width: 900px;
    height: 100px;
    margin: auto;
}

.logo {
    background-color: red;
    width: 900px;
    height: 100px;
}

.nav {
    background-color: blue;
    width: 600px;
    height: 100px;
    float: left;
}

.navtwo {
    background-color: green;
    width: 300px;
    height: 100px;
    float: left;
}

.eraser {
    clear: both;
}

.menu {
    width: 900px;
    height: 200px;
}

.menuone {
    background-color: yellow;
    width: 300px;
    height: 100px;
    float: left;
}

.menutwo {
    background-color: greenyellow;
    width: 300px;
    height: 100px;
    float: left;
}


.menutree {
    background-color: sienna;
    width: 600px;
    height: 100px;
}

.menufour {
    background-color: aquamarine;
    width: 300px;
    height: 200px;
    float: left;
}

2 odpowiedzi

odpowiedź 26 czerwca 2018 przez kenjiro244 Dyskutant (8,600 p.)

odpowiedź 26 czerwca 2018 przez pablop76 VIP (123,180 p.)

Struktura html jest niepoprawna. Nie wystarczy w tym przypadku manipulować clear: both; Swoją drogą dlaczego jest jako pierwszy div w kontenerze? Należy dla elementów żółty, zielony, brązowy stworzyć osobny kontener i ustawić go jako float, a w nim znowu żółty i zielony jako float a brązowy jako czyszczący.

Wysokość dla .container 100px? Przecież zawarłeś w nim wdzystkie elementy. Ogłądam to na telefonie i mogę coś przekręcić bo mam słaby podgląd na cały kod.