<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 01</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>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
margin: 1rem 0;
}
body>* {
border: 1px solid red;
display: flex;
}
body>*>* {
padding: 0.5rem;
border: 1px solid silver;
}
body>*>:nth-child(1) {
flex: 0 0 140px;
}
body>*>:nth-child(2) {
flex: 1 0 1%;
}
}
</style>
</head>
<body>
<main>
<nav>
<p>Banane</p>
<p>Apfel</p>
<p>Kirsche</p>
<p>Kiwi</p>
<p>Pfirsich</p>
<p>Weintraube</p>
</nav>
<article>
<p>Kaum standen am folgenden Tage die hohen Felsengipfel im Glanz des Sonnenlichts, so hüpfte Gustav aus dem Bette und fand - wem kommt dabey nicht das ehemahls selbst genossene kindische Entzücken beym Anblick des Weihnachtsgeschenks ins Gedächtniss? - einen netten Anzug auf dem Stuhle am Bette, den die Gattinn des Schultheissen von den Söhnen eines im Flecken wohnenden Edelmannes, einstweilen angenommen hatte, da sich nicht so schnell, als sie es jetzt wünschte, die Nähnadeln zu Buchenthal in Bewegung setzen liessen. Ewalds hatten ein Weilchen auf das Benehmen des kleinen Lieblings gelauscht, und öffneten das Gemach, als sich eben seine Empfindungen in ein lautes »Ach wie schön!« auflösten. »Guten Tag, Papa, guten Tag, Mama!« schluchzte Gustav, und eilte den Kommenden entgegen, um mit tausend Händeküssen ihnen Dank und Liebe zu zollen. Die guten Alten staunten bey dem seltenen Feingefühl eines so kleinen Knaben, und hätten von diesem Augenblicke gegen die Schätze von Golconda, dem aufgenommenen Pflegling nicht entsagt.</p>
</article>
</main>
</body>
</html>
