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

Style-Sheet dieses Teils:

#orange {
   background: #ffe6d5;  padding: 0;  border: none;  margin: 0;  width: 74%;  overflow: auto; }
#orange-inside {
   background: #ffddaa;  padding: 0;  border: 1px solid #f60;  margin: 10px; }

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:

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

Das HTML der Seite:

<body>
<div id="orange">
<div id="orange-inside">
...
</div>
<div class="line"></div>
</div>
<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>
<div id="purple">
<div id="purple-inside">
...
</div>
<div class="line"></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;
   }

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.

Style-Sheet dieses Teils:

#purple {
   background: #f1e6ff;  padding: 0;  border: none;  margin: 0;  width: 74%;
   overflow: auto; clear: both; }
#purple-inside {
   background: #e3ccff;  padding: 0;  border: 1px solid #a6f;  margin: 10px; }

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