June 5th, 2007
3 Column Layout - die Tausendste
Zum zigsten Mal: 3-Spalten Layout mit CSS, ohne Tabellen mit gleichhohen Spalten? Immer wieder dasselbe… Hier nun aufs Wesentliche reduziert ein möglicher Lösungsweg:
Ein outer-DIV mit dickem border-left und border-right, da drinnen ein inner-DIV mit negativem margin (left und right, genauso dick wie die Borders). Und drei lustig floatende Spalten. Das ist eigentlich schon alles.
Das HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"Und das CSS:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="default.css" type="text/css">
</head>
<body>
<div id="positioner">
<div id="outer-container">
<div id="inner-container">
<div id="left">
<p>left</p>
</div>
<div id="right">
<p>right</p>
</div>
<div id="middle">
<p>middle</p>
</div>
<div class="clear"></div>
</div>
</div>
<!-- wichtig für IE 6 -->
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
}
.clear {
clear: both;
}
#positioner {
width: 65em;
margin: 0px auto;
text-align: left;
}
#outer-container {
border-left: 10em solid #a0a0ff;
border-right: 10em solid #ffa0a0;
background-color: #e0e0e0;
}
#inner-container {
margin-left: -10em;
margin-right: -10em;
}
#left {
width: 10em;
float: left;
}
#middle {
float: left;
width: 45em;
}
#right {
width: 10em;
float: right;
}
2 Responses to “3 Column Layout - die Tausendste”
Und was genau ist daran jetzt elegant gegenueber einem table? Zudem man ja nicht wirklich von einer Trennung von Layout und Struktur sprechen kann, bei der Schachtelorgie..
June 5th, 2007 at 09:21
Danke habe nach eine 3 Column Layout gesucht und bei mir gleich mal verlinkt.
October 31st, 2007 at 10:59
Leave a Reply