Boxen positioniert mit float:

Ü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 verhindert ein weiteres Zusammenschieben der 
Rahmenboxen bei Ereichen der minimalen Fensterweite
in Opera/Mozilla 1.3; optional anzupassen */
   min-width: 138px; 
} 
.boxrahmen {
   color: #003;
   background-color: #f7b56b;
/* width notwendig für IE Win, da sonst Fehldarstellung */
   width: 100%; 
   padding-bottom: 10px;
}
.box01 {
   color: #003;
   background-color: #fef3e8;
   border: 1px solid #a53121;
   width: 30%;
/* folgende min-width in Relation zu entsprechender Angabe unter .aussenrahmen (s.o.) */
   min-width: 130px;
   margin-top: 10px; 
/* margin-left-Angabe abweichend von .box02 & .box03 , ermittelt durch Trial & Error,
float-bug in IE wird in darauffolgender Definition korrigiert */
   margin-left: 2.2%; 
   float: left;
}
/* ab hier wird's tricky wegen IE Float-Bug, 
Hack dank Thomas Scholz; Erklärung siehe:
http://www.css-technik.de/details/107/5/CSS-Browser-Bugs.htm;
verursacht *keine* Warnung beim Validieren! */
* html .box01 { 
/* fuer IE Win \*/
  margin-left: 1.1%;
/* */
}
.box02 {
  color: #003;
  background-color: #fef3e8;
  border: 1px solid #a53121;
  width: 30%;
/* min-width siehe .box01 */
  min-width: 130px;
  margin-top: 10px;
  margin-left: 2.5%;
  float: left;
  }
.box03 {
   color: #003;
   background-color: #fef3e8;
   border: 1px solid #a53121;
   width: 30%;
/* min-width siehe .box01 */
   min-width: 130px;
   margin-top: 10px;
   margin-left: 2.5%;
   float: left;
}
.box01 h1, .box02 h1, .box03 h1 {
   font-size: 1em;
   margin: 12px 5px;
}
.box01 p, .box02 p, .box03 p {
   margin: 12px 5px;
}
.clear {   
   clear: both;
}

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="boxen01.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>
   
   <br class="clear" /><!--Brechen der Floats um Höhe des Boxrahmens zu erhalten-->
  
  </div><!--Ende Boxrahmen-->
  
</div><!--Ende Hauptbox-->
	
</body>
</html>

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