Witam,
Rozwiązując zadanie z ustawianiem divów za pomocą metody float left wszystko wyszlo mi wporządku.
Jednak używając metody inline block mam problem z umiejscowieniem 3 divów w środku innego. Kiedy ten div jest bez dodatkowych divów w środku, znajduje sie w odpowiednim miejscu, lecz jeśli wrzucę do środka te 3 dodatkowe, opada razem z nimi o 100px.
HTML
<body>
<div class="container">
<div class="logo"></div>
<div class="menu"></div>
<div class="menu2"></div>
<div class="nav">
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
</div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
</body>
CSS
.container
{
background-color: white;
width: 800px;
height: 600px;
margin: auto;
font-size: 0;
}
.logo
{
background-color: gray;
width: 800px;
height: 100px;
}
.menu
{
background-color: black;
width: 600px;
height: 100px;
display: inline-block;
}
.menu2
{
background-color: coral;
width: 200px;
height: 100px;
display: inline-block;
}
.nav
{
background-color: pink;
width: 600px;
height: 200px;
display: inline-block;
}
.nav1
{
background-color: brown;
width: 300px;
height: 100px;
display: inline-block;
}.nav2
{
background-color: green;
width: 300px;
height: 100px;
display: inline-block;
}.nav3
{
background-color: gold;
width: 600px;
height: 100px;
}
.content
{
background-color: skyblue;
width: 200px;
height: 200px;
display: inline-block;
}
.sidebar
{
background-color: teal;
width: 800px;
height: 100px;
Tak to wygląda po wyswwietleniu a powinno tak jak ponizej.
Byłbym wdzieczny za jakieś sugestie. Pozdrawiam.