form4 GmbH & Co.KG - Innovative Softwareentwicklung

3 Column Layout – die Tausendste
SuchenSitemap

3 Column Layout – die Tausendste

Oliver Meimberg, 11.11.2007

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:

"http://www.w3.org/TR/html4/strict.dtd">



Insert title here







left





middle










Und das CSS:

* {
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;
}