float und clear, Beispiel 5cStyle-Sheet dieses Teils:
#red {
background-color: #ffd5ee;
padding: 0;
border: 1px solid #f09;
margin: 0 10px 10px 0;
width: 25%;
float: left;
}
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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras diam pede, congue id, venenatis ac, tincidunt sit amet, odio. Nullam aliquet accumsan nulla. Sed nec nisl non arcu sodales ultricies.
Integer vulputate, metus aliquet lacinia nonummy, lectus leo porttitor lectus, sed faucibus eros diam non massa. Aliquam rutrum faucibus lorem. Nulla facilisis, sapien tempor faucibus iaculis, lorem ipsum eleifend nunc, at sagittis tellus neque non dolor.
Aenean hendrerit pellentesque urna. Etiam dui. Integer tortor metus, convallis vel, nonummy non, placerat sit amet, risus. Maecenas convallis lacinia libero. Praesent nisi. Suspendisse consectetuer tellus non arcu.
Nam non metus. Sed sodales. Vestibulum eget mauris in ante commodo porttitor. Aenean ac enim eu tortor sodales mollis. Maecenas vel diam quis nibh fringilla vehicula. Vivamus velit lacus, interdum sed, iaculis et, pretium ut, metus.
Vestibulum urna odio, pharetra quis, gravida vel, convallis at, erat. Donec posuere. Mauris a mauris vel nulla dapibus scelerisque. Cras fringilla mattis dui. In hac habitasse platea dictumst. Etiam at mi nec augue ullamcorper dignissim.
Nullam id risus. Aliquam gravida, risus vel laoreet accumsan, nibh neque blandit arcu, vel adipiscing eros pede eget lacus. Curabitur laoreet. Aenean libero erat, gravida in, molestie a, viverra quis, mauris.
Mauris pretium, ipsum sit amet convallis adipiscing, sapien nisl volutpat lectus, vitae varius odio ipsum et pede. Integer in elit sed orci rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vitae leo ut urna varius porta.
Proin dignissim accumsan magna. Curabitur eget tellus scelerisque justo scelerisque pellentesque. Maecenas elementum augue quis erat. Nullam molestie nulla sit amet turpis. Vestibulum pede augue, tempor eget, vehicula nec, ornare a, dolor. Nunc ut lorem.
Proin accumsan. Quisque tempus convallis urna. Praesent lectus. Nulla ornare sapien quis odio. Integer molestie. Mauris non quam sit amet nibh pretium scelerisque. Vestibulum accumsan. Ut at risus ac dolor facilisis dictum.
Aliquam pharetra, lectus varius accumsan tristique, mi velit vehicula quam, tincidunt commodo sem purus nec quam. In magna arcu, dapibus non, tincidunt nec, tincidunt ut, neque. Ut venenatis. Nullam hendrerit rutrum felis.
Aliquam ac lectus. Suspendisse nonummy metus eget quam. Vestibulum eu nunc. Aenean facilisis elementum nunc. Vestibulum et odio. Quisque sed velit. Aliquam lacinia gravida lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam fermentum justo at erat. Fusce magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sem sit amet mi iaculis accumsan. Phasellus lectus. Etiam ipsum leo, iaculis id, semper consectetuer, rutrum semper, justo.
Nullam laoreet nunc. Morbi iaculis aliquam purus. Morbi scelerisque. Integer elit enim, tempus nec, pretium at, elementum quis, mauris. Phasellus purus. Nam metus dolor, aliquet eu, auctor ut, fermentum in, est.
Donec molestie, arcu sit amet feugiat porttitor, urna justo viverra sapien, in facilisis felis libero quis dui. In eleifend rutrum erat. Aliquam a nisl eu tortor dictum scelerisque. Aliquam erat volutpat.
Style-Sheet dieses Teils:
#blue {
background-color: #d5eeff;
padding: 0;
border: 1px solid #09f;
margin: 10px;
}
Das HTML der Seite:
<body> <div id="blue"> <div id="red"> ... </div> </div> </body>