opływanie powoduje zanik tła

pytanie zadane 28 listopada 2016 w HTML i CSS przez Wilier Bywalec (2,570 p.)

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

3 odpowiedzi

odpowiedź 28 listopada 2016 przez Olaf Siwiński Mądrala (7,060 p.)
wybrane 28 listopada 2016 przez Wilier

Najlepsza

Dopisz w klasie .wrapper

overflow: hidden;

1	komentarz 28 listopada 2016 przez Wilier Bywalec (2,570 p.) ukłony do ziemi

odpowiedź 28 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)

http://jsbin.com/fujefemibe/edit?css,output

Pomiędzy linkami tutaj możesz śmiało użyć nav ul li a

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

czytelniej by było widać ten kod.