Sidebar setzt sich in die section

zockerzixel · 30.05.2020

Moin!

Ich sitze momentan an meiner ersten Webseite - bin daher noch ein ziemlicher Anfänger.

Nun mein Problem:

https://www.dropbox.com/h?preview=Bildschirmfoto+2020-05-11+um+19.36.17.png

https://www.dropbox.com/h?preview=Bildschirmfoto+2020-05-14+um+16.39.01.png
(Bilder sind nochmal als Datei angehängt)

Egal wie ich es probiere - entweder geht die Sidebar in die Section oder sie setzt sich unter die Section.
Wie kann ich das beheben? Also die Sidebar soll neben der Section sein, dennoch "getrennt". Also das es nicht ineinander hinein geht.

Mit freundlichen Grüßen zockerzixel

Die Codes (HTML und CSS). Ich weiß das es etwas viel zu viel geworden ist. Da ich aber noch Anfänger bin, kopiere ich lieber zu viel als zu wenig.:

HTML:

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>HTML | Home</title>
<meta charset="utf-8">


</head>

<body>
	<div id="wrapper">
		<header><img alt="Logo" src="pictures/logo.png"> </header>

		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="Überuns.html">Über uns</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
			</ul>
		</nav>

		<section>
			<div class="article">
				<img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das
					ist der Titel von diesem Beitrag</a>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
					diam nonumy eirmod tempor invidunt ut labore et dolore magna
					aliquyam erat, sed diam voluptua.</p>
			</div>
			<div class="article">
				<img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das
					ist der Titel von diesem Beitrag</a>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
					diam nonumy eirmod tempor invidunt ut labore et dolore magna
					aliquyam erat, sed diam voluptua.</p>
			</div>
			<div class="article">
				<img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das
					ist der Titel von diesem Beitrag</a>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
					diam nonumy eirmod tempor invidunt ut labore et dolore magna
					aliquyam erat, sed diam voluptua.</p>
			</div>
		</section>

		<aside>
			<div class="sidebar">
				<a href="#"> Das ist die Sidebar </a> <br /> <img alt="Sidebar"
					src="pictures/sidebar.png">
				<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem
					ipsum dolor sit amet.</p>
			</div>

			<div class="sidebar">
				<a href="#"> Das ist die Sidebar </a> <br /> <img alt="Sidebar"
					src="pictures/sidebar.png">
				<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem
					ipsum dolor sit amet.</p>
			</div>


		</aside>
		<footer>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="Überuns.html">Über uns</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
			</ul>
			<p>
				<a href="#">© 2020 zockerzixel05 </a>
			</p>
		</footer>


	</div>


</body>





</html>

Code:

#wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	font-size: 16px;
	font-family: arial, sans-serif;
}

body {
	background-color: #EDEDE8;
	text-align: center;
}

header* {
	padding-top: 10px;
	padding-bottom: 10px;
	height: 50px;
	position: absolute;
	text-align: center;
}

nav {
	text-align: center;
}

nav ul {
	list-style-type: none;
}

nav li {
	display: inline;
	margin-right: 40px;
}

a {
	color: #777;
	text-decoration: none;
}

section {
	width: 603px;
	float: left;
	padding: 15px;
	margin-top: 15px;
	margin-right: 15px;
	background-color: #F2F2F2;
	border: 1px solid #DEDCD9;
	border-radius: 5px;
	margin-bottom: 10px;
}

.article {
	height: 120px;
	margin-top: 15px;
	margin-bottom: 50px;
}

.article img {
	float: left;
	padding: 5px;
	margin-right: 10px;
	border: 1px solid #DEDCD9;
}

.article a {
	font-size: 18px;
}

aside {
	widht: 258px;
	flex: right;
	padding: 25px;
	margin-top: 15px;
	margin-left: 15px;
	background-color: #F2F2F2;
	border: 1px solid #DEDCD9;
	border-radius: 5px;
	margin-buttom: 10px;
}

.sidebar img {
	padding: 5px;
	margin-top: 15px;
	border: 1px solid #DEDCD9;
}

.sidebar a {
	font-size: 18px;
	padding: 5px;
}

.sidebar p {
	padding: 5px;
}

footer {
	background-color: #F2F2F2;
	border: 1px solid #DEDCD9;
	border-radius: 5px;
	clear: both;
}

footer ul {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 20px;
}

footer li {
	margin-right: 15px;
	display: inline;
}

footer p {
	text-align: right;
	margin-right: 20px;
	color: #777;
}

#über {
	margin: 15px;
}

#über h1 {
	color: #777;
	padding-bottom: 10px;
}

#kontakt {
	margin: 15px;
}

#kontakt h1 {
	color: #777;
	padding-bottom: 10px;
}
}