Hej,
proszę rzucić okiem na kod. Błąd z ktorym nie mogę sobie poradzić widać na screenie. Na pierwszym jest białe tło i sekcja aside na dole. Chcę aby aside była po prawej stronie strony, lecz gdy użyję właściwości float: left dzieje się to co na obrazku 2, czyli białe tło znika i mam to domyślne dla body.
W kodzie css to "wadliwe" float jest w : section.courses
________________
_____
kod
<!DOCTYPE HTML>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css" >
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Gallery</title>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li><a href="" class="current">strona główna</a></li>
<li><a href="">zajęcia</a></li>
<li><a href="">catering</a></li>
<li><a href="">o nas</a></li>
<li><a href="">kontakt</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Sos Teriyaki"/>
<figcaption>Sos Teriyaki</figcaption>
</figure>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popularne przepisy</h2>
<a href="">Yakitori (grilowany kurczak)</a>
<a href="">Tsukune (mielone kotleciki z kurczaka)</a>
<a href="">Okonomiyaki (smaczne naleśniki)</a>
<a href="">Mizutaki (gulasz z kurczaka)</a>
</section>
</aside>
</div>
</body>
</html>
___
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
background-image: url("images/dark-wood.jpg");
background-color: #f9f8f6;
background-position: center;
margin: 0px;
}
.wrapper {
margin: 20px auto;
width: 940px;
background-color: #fff;
}
header {
height: 160px;
background-image: url(images/header.jpg);
}
nav {
position: relative;
top: 130px;
height: 30px;
background-color: #aeaca8;
}
nav, footer {
claer: both;
}
.current {
color: #000;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #000;
}
section.courses {
/*float: left;*/
width: 659px;
border-right: 1px solid #eee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
figcaption{
color: #000;
}
figure {
float: left;
width: 290px;
height: 220px;
border: 1px solid #eee;
padding: 5px;
margin: 20px;
}
aside {
float: left;
width: 230px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}