HTML5 CSS3 3-Spalten-Layout

Aus Line5 Wiki
Wechseln zu: Navigation, Suche

3-Spalten Layout mit Kopfzeile und Fußzeile

<adsense>a</adsense>

Dieses 3-Spalten Layout hat eine feste Breite, eine Kopfzeile (banana) und eine Fußzeile (strawberry).

HTML Datei
 <!DOCTYPE HTML>
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 3-Spalten Layout</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
 </head>
 <body>
  <div id="fruits">

    <div id="banana">
      banana
    </div>

    <div id="apple">
      apple<br />z2<br />z3<br />z4<br />z5
    </div>

    <div id="orange">
      orange<br />z2<br />z3
    </div>

    <div id="ananas">
      ananas<br />z2
    </div>

    <div id="strawberry">
      strawberry
    </div>

  </div>
</body>
</html>
CSS-Datei
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #eee;
}

#fruits {
	background-color: #ffc;
	width: 1000px;
	margin: auto;
}

#banana {
	background-color: #cc4;
	height: 100px;
}

#apple {
	background-color: #0c0;
	width: 140px;
	float: left;
	
}
#orange {
	background-color: #f60;
	float: right;
	width: 200px;
}

#ananas {
	background-color: #00f;
	margin-right: 210px;
	margin-left: 200px;
}

#strawberry {
	background-color: #c00;
	clear: both;
	margin-top: 20px;
}