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

Style-Sheet dieses Teils:

#blue {
   background-color: #d5eeff;
   padding: 0;
   border: ;
   margin: 0;
   width: 33.3%;
   float: right;
   overflow: auto;
   }
#blue-inside {
   background-color: #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>
</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-color: #ffd5ee;
   padding: 0;
   border: none;
   margin: 0;
   width: 33.3%;
   float: right;
   overflow: auto;
   }
#red-inside {
   background-color: #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-color: #fff7d5;
   padding: 0;
   border: ;
   margin: 0;
   width: 33.3%;
   float: right;
   overflow: auto;
   }
#yellow-inside {
   background-color: #fea;
   padding: 0;
   border: 1px solid #fc0;
   margin: 10px;
   }

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