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;
}
5 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
Florian hat recht, eleganter ist das noch nicht (CSS3 abwarten). Trotzdem: Browser rendern div tables wesentlich schneller als table tables!
Im übrigen ist Struktur und Layout schon getrennt. Du kannst nämlich links und rechts vertauschen ohne was am Code zu ändern.
March 25th, 2009 at 04:00
Elegant ist das wirklich nicht Trennung von Struktur und Layout hin oder her. Doch wer greift nicht gern mal zur Quick and Dirty Lösung
.
July 23rd, 2009 at 02:11
Bei BITV-Projekten kommt man um so etwas nunmal nicht herum…
July 24th, 2009 at 06:58
Leave a Reply