Hallo,
Blockelemente wie div, aside, nav, section, h1 bis h6, p u.s.w. beginnen immer unterhalb des vorigen Blockelements.
Wenn Blockelemente gefloatet nebeneinander stehen sollen müssen beide gefloatet werden.
In deinem Fall sollen 2 Elemente untereinander stehen und daneben soll ein weiteres Element angeordnet werden. Dafür gibt es mit HTML und CSS keine direkte Lösung.
Du musst also um die beiden übereinander stehen Elemente ein zusätzliches herumlegen und das ebenfalls floaten.
Das könnte dann so aussehen:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Probleme 03</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
* {padding: 0; margin: 0;}
body {background-color: lightgreen; color: white; }
#wrapper {background-color: black; width: 1000px; margin: auto; }
header {background-color: green; height: 300px;}
#navioben {background-color: red; height: 50px;}
aside {width: 200px; float: left; }
section {background-color: blue; height: 250px; }
#naviseite {background-color:purple; height: 250px;}
main {background-color: grey; width: 580px; height: 450px; float: right;}
footer {background-color:orange; height: 30px; clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<header>
<p>header</p>
</header>
<nav id="navioben">
<p>navioben</p>
</nav>
<aside>
<section>
<p>news</p>
</section>
<nav id="naviseite">
<p>naviseite</p>
</nav>
</aside>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</div>
</body>
</html>Gruss
MrMurphy