CSS-Layouts mit Hilfe von float und clear, Beispiel 8

Style-Sheet dieses Teils:

#blue {
   background: #d5eeff;
   padding: 0;
   border: none;
   margin: 0;
   width: 25%;
   float: right;
   overflow: auto;
   }
#blue-inside {
   background: #adf;
   padding: 0;
   border: 1px solid #09f;
   margin: 10px;
   }

Das HTML der Seite:

<body>
<div id="blue">
<div id="blue-inside">
...
</div>
</div>
<div id="red">
<div id="red-inside">
...
</div>
</div>
<div id="yellow">
<div id="yellow-inside">
...
</div>
</div>
<div id="green">
<div id="green-inside">
...
</div>
</div>
</body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Style-Sheet dieses Teils:

#red {
   background: #ffd5ee;
   padding: 0;
   border: none;
   margin: 0;
   width: 25%;
   float: right;
   overflow: auto;
   }
#red-inside {
   background: #fad;
   padding: 0;
   border: 1px solid #f09;
   margin: 10px;
   }

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Style-Sheet dieses Teils:

#yellow {
   background: #fff7d5;
   padding: 0;
   border: none;
   margin: 0;
   width: 25%;
   float: right;
   overflow: auto;
   }
#yellow-inside {
   background: #fea;
   padding: 0;
   border: 1px solid #fc0;
   margin: 10px;
   }

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Style-Sheet dieses Teils:

#green {
   background: #d5ffee;
   padding: 0;
   border: none;
   margin: 0;
   width: 25%;
   float: right;
   overflow: auto;
   }
#green-inside {
   background: #afd;
   padding: 0;
   border: 1px solid #0f9;
   margin: 10px;
   overflow: auto;
   }

Vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.