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;
}