Pe.: Maring-Top und IE verhalten

Beitrag lesen

SELF-Forum

Maring-Top und IE verhalten

Pe.
– Informationen zu den Bewertungsregeln

Danke für die Anmerkungen

Ich habe den Code jetzt überarbeitet, doch leider zersprengt mir das floaten im neuen code das komplette Layout.

Im ersten Bild (ohne Float) lass ich den header und das aside Floaten, aber die nav nicht.
Wie man sieht fällt hier das img auch schon aus der "body Box" raus.

Im zweiten bild (mit Float) lass ich auch die nav links floaten. Damit wollte ich eigentlich den article links neben die nav bringen, jedoch fliegt endgültig alles aus der "body Box".

Wie schaffe ich es, dass mein header, nav, asid und article in der Box trotz floaten bleibt?
Und wie bekomme ich dann den Footer aus der Box?

Den Aufbau vom Body habe ich von deinem Beispiel übernommen.

  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>  
        <title>TEST</title>  
        <link rel="stylesheet" href="./assets/css/test.css" type="text/css" media="screen, projection" />  
    </head>  
    <body>  
		<header>  
			<a href="test.html">  
				<img src="./assets/images/logo.png" alt="Test" />  
			</a>  
		</header>  
		<aside id="page_img">test  
		</aside>  
		<nav>  
			<ul>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
			<ul>  
		<nav>  
		<article>  
			Im ersten Teil ...  
        	</article>	  
	</body>  
	<footer>  
		Footer  
	</footer>  
</html>  


  
html  
{  
    background: grey;  
}  
  
body  
{  
    background: #fff;  
    font-family: sans-serif;  
    max-width: 900px;  
    margin: 4em auto 2em;  
    padding: 1em 2em;  
}  
  
body>:first-child  
{  
    margin-top: 0;  
}  
  
body>:last-child  
{  
    margin-bottom: 0;  
}  
  
header {  
	float: left;  
}  
  
header img{  
	width: 200px;  
}  
  
aside {  
	background-image: url(../images/img.jpg);  
	float: right;  
	width: 200px;  
	height: 300px;  
	margin-top: 55px;  
	margin-bottom: 55px;  
	text-align: center;  
}  
  
nav {  
	float:left;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln