Dzięki za odpowiedź ale nadal nie jest to całkowicie jasne. W przykładzie MZ jest analogiczny kod tzn. też jest sztywny kontener a mimo to w odróżnieniu od mojego kodu trzeba czyścić przepływ. Musi być jakaś inna przyczyna... W załączeniu kody z przykładu MZ:
Kod HTML:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<title>Książki science fiction, które musisz przeczytać</title>
<meta name="description" content="Lista najlepszych książek z zakresu fantastyki, science-fiction wartych przeczytania! Fantastyka naukowa - TOP Lista wszech Czasów"/>
<meta name="keywords" content="książki, science, fiction, fantastyka, sf">
<meta name="author" content="Romuald Wawszczak">
<meta http-equiv="X-Ua-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" href="css/main.css">
<script src="code.js"></script>
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="menu"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
</body>
</html>
Kod CSS: (po skomentowaniu linii 46 /* clear: both; */ to nie działa a w moim kodzie by działało... Dlaczego?
body{
background-image: url(../img/escheresque_ste.png);
/* Background pattern from Subtle Patterns */
margin: 0;
}
.container{
margin: auto;
background-color: white;
width: 900px;
height: 500px;
}
.logo{
background-color: grey;
width: 900px;
height: 60px;
}
.menu{
background-color: black;
width: 900px;
height: 40px;
}
.nav{
background-color: coral;
width: 250px;
height: 300px;
float: left;
/* display: inline-block; */
/* margin-right: -4px; */
}
.content{
background-color: skyblue;
width: 450px;
height: 300px;
float: left;
}
.sidebar{
background-color: teal;
width: 200px;
height: 300px;
float: left;
}
.footer{
background-color: RebeccaPurple;
width: 900px;
height: 100px;
/* clear: both; */
}