Boxen absolut & relativ positioniert:

Überschrift 1

Hier steht der Text, der in die Box gehört.

Überschrift 2

Hier steht der Text, der in die Box gehört.

Überschrift 3

Hier steht der Text, der in die Box gehört.

Code mit Erläuterungen:

Beispieldateien downloaden (3-boxen.zip)

CSS-Code (externes Stylesheet):

body {
/* 101% zur font-size-Korrektur für Opera bis v.6 */
   font: normal 101% "Times New Roman", Times, serif; 
   color: #003;
   background-color: #f7cea5;
   padding: 0;
   margin: 10px;
}
.aussenrahmen {
   color: #003; 
   background-color: #fde7Ca;
   border: 1px dashed #a53121;
   padding: 20px;
   margin-bottom: 10px;
/* min-width, um ein Übereinanderschieben der Boxen in Geckos/Opera zu verhindern ;
ergänzt sich mit min-width-Angaben der Boxen; IE6-Workaround siehe unten */
   min-width: 377px; 
}
.boxrahmen {
/* position:relative, um enthaltene Boxen absolut zum .boxrahmen zu positionieren */
   position: relative;
   color: #003;
   background-color: #f7b56b;
   padding: 10px 0;
/* width notwendig für IE Win, da sonst Fehldarstellung */
   width: 100%;
/* text-align zur Zentrierung der mittleren Box, 
notwendig für IE 5 und IE 6 im Quirk-Modus */
   text-align: center; 
}
.box01 {
   position: absolute; 
   top: 10px;
   left: 2%;
/* z-index: zwischenliegende Box bei Überlagerung */
   z-index: 2;
   color: #003;
   background-color: #fef3e8;
   border: 1px solid #a53121;
   width: 30%;
   min-width: 110px;
   text-align: left;
}
.box02 {
/* position:relative für z-index */
   position: relative;
/* z-index: oberste Box bei Überlagerung */
   z-index: 3;
   color: #003;
   background-color: #fef3e8;
   border: 1px solid #a53121;
   width: 30%;
   min-width: 110px;
/* margin-Angaben zur standardmäßigen Zentrierung der mittleren Box 
(auch IE 6 im Standardmodus) */
   margin: 0 auto;
   text-align: left;
/* ab hier optionaler Hack für IE 6, um eine Art "Pseudo-min-width"-Effekt 
zu erzeugen, basierend auf Tantek-Hack (siehe auch 
http://www.b-spoke.de/artikel/css-box-model/boxmodell-03.html
und dem in boxen01.css erwähnten Hack von Thomas Scholz;
falls nicht gewünscht, ab hier bis zum Ende-Kommentar entfernen;
verursacht Warnung (keinen Fehler!) beim Validieren */ 
   voice-family: "\"}\"";
   voice-family: inherit;
/* ab hier Ende für IE 5 Win */
}
* html .box02 { 
/* nur fuer IE 6 Win, IE 5 produziert sonst Fehldarstellung \*/
   margin-right: 100px;
   margin-left: 100px;
/* IE-Hack Ende*/
}
.box03 {
   position: absolute; 
   top: 10px;
   right: 2%;
/* z-index: unterste Box bei Überlagerung */
   z-index: 1;
   color: #003;
   background-color: #fef3e8;
   border: 1px solid #a53121;
   width: 30%;
   min-width: 110px;
   text-align: left;
}
.box01 h1, .box02 h1, .box03 h1 {
   font-size: 1em;
   margin: 12px 5px;
}
.box01 p, .box02 p, .box03 p {
   margin: 12px 5px;
}

XHTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>3-Boxen-Modell mit "float"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="boxen02.css" rel="stylesheet" type="text/css" />
</head>

<body>
    
<div class="aussenrahmen"><!--Hauptbox-->

 <div class="boxrahmen"><!--Innerer Boxrahmen-->
 
   <div class="box01"> 
     <h1>&Uuml;berschrift 1</h1>
     <p>Hier steht der Text, der in die Box geh&ouml;rt.</p>
   </div>
   
   <div class="box02"> 
     <h1>&Uuml;berschrift 2</h1>
     <p>Hier steht der Text, der in die Box geh&ouml;rt.</p>
   </div>
   
   <div class="box03"> 
     <h1>&Uuml;berschrift 3</h1>
     <p>Hier steht der Text, der in die Box geh&ouml;rt.</p>
   </div>
   
  </div><!--Ende Boxrahmen-->
  
</div><!--Ende Hauptbox-->
	
</body>
</html>

Autor: Oliver Roth -- Valides CSS -- Valides XHTML 1.0 strict