- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Float River</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en" />
<style type="text/css">
#l-00, #l-01, #l-02, #l-03, #l-04, #l-05, #l-06, #l-07, #l-08, #l-09, #l-10, #l-11, #l-12 { float:left; clear:left; }
#r-0, #r-00, #r-01, #r-02, #r-03, #r-04, #r-05, #r-06, #r-07, #r-08, #r-09, #r-10, #r-11 { float:right; clear:right; width: 0px;}
#l-00 { width : 0px; } #l-00, #r-0 { height : 155px; }
#l-01 { width : 80px; } #l-01, #r-00 { height : 10px; }
#l-02 { width : 140px; } #l-02, #r-01 { height : 10px; }
#l-03 { width : 170px; } #l-03, #r-02 { height : 20px; }
#l-04 { width : 180px; } #l-04, #r-03 { height : 30px; }
#l-05 { width : 170px; } #l-05, #r-04 { height : 10px; }
#l-06 { width : 160px; } #l-06, #r-05 { height : 15px; }
#l-07 { width : 145px; } #l-07, #r-06 { height : 10px; }
#l-08 { width : 125px; } #l-08, #r-07 { height : 10px; }
#l-09 { width : 105px; } #l-09, #r-08 { height : 10px; }
#l-10 { width : 85px; } #l-10, #r-09 { height : 10px; }
#l-11 { width : 60px; } #l-11, #r-10 { height : 20px; }
#l-12 { width : 40px; } #l-12, #r-11 { height : 20px; }
</style>
</head>
<body>
<div style="width:442px; border: solid red 1px;">
<div id="l-00"></div><div id="r-0"></div>
<div id="l-01"></div><div id="r-00"></div>
<div id="l-02"></div><div id="r-01"></div>
<div id="l-03"></div><div id="r-02"></div>
<div id="l-04"></div><div id="r-03"></div>
<div id="l-05"></div><div id="r-04"></div>
<div id="l-06"></div><div id="r-05"></div>
<div id="l-07"></div><div id="r-06"></div>
<div id="l-08"></div><div id="r-07"></div>
<div id="l-09"></div><div id="r-08"></div>
<div id="l-10"></div><div id="r-09"></div>
<div id="l-11"></div><div id="r-10"></div>
<div id="l-12"></div><div id="r-11"></div>
<div style="padding-left:20px; padding-right:15px;">
<h2>Float test</h2>
<p>Pellentesque tortor neque, faucibus vitae, suscipit sed, auctor in, sem. Proin est ante, mattis et, pulvinar nec, sodales in, libero. Phasellus turpis urna, vulputate vel, egestas vitae, imperdiet et, massa. Sed eros dui, commodo vel, gravida non, egestas at, erat. Suspendisse potenti. Mauris suscipit. Morbi quis turpis sit amet risus molestie nonummy. Donec elementum nisl tincidunt tellus. Mauris in arcu sit amet augue rhoncus mattis. Pellentesque fermentum. Curabitur ut mauris. Etiam tempus dui ac eros. Aliquam eu tellus at augue dignissim sagittis. Phasellus vitae est. Praesent risus. Donec facilisis, ante at mollis tincidunt, sem felis ultricies pede, eu fringilla orci magna eu dui. Suspendisse nibh ipsum, dapibus at, scelerisque at, bibendum id, nisl. Vivamus aliquam sem id metus.</p>
</div>
</div>
</body>
</html>
