CSS Float "River" [Archive] - CodingForums.com

Robert Gottier

08-17-2007, 03:25 AM

This code works in all browsers I've tested except IE6 and IE7. I can get it working if I don't declare a doctype, but I'd like a solution that will validate. Please help if you can:

<!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>

garydarling

08-17-2007, 06:40 AM

That's a fairly complex layout you are trying to achieve; not sure what the overall objective is without CSS comments in your file. I know IE doesn't like to render boxes without content; you may need to fill your spacer divs with some form of whitespace to get them to show.

_Aerospace_Eng_

08-17-2007, 07:01 AM

This works in IE7 and may work in IE6 as well as Firefox. Haven't tested it there yet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html 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;
line-height:0;
}

#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;
line-height:0;
}

#l-00 {
width : 0px;
line-height:0;
}

#l-00, #r-0 {
height : 155px;
}

#l-01 {
width : 80px;
}

#l-01, #r-00 {
height : 10px;
line-height:0;
}

#l-02 {
width : 140px;
}

#l-02, #r-01 {
height : 10px;
line-height:0;
}

#l-03 {
width : 170px;
}

#l-03, #r-02 {
height : 20px;
line-height:0;s
}

#l-04 {
width : 180px;
}

#l-04, #r-03 {
height : 30px;
}

#l-05 {
width : 170px;
}

#l-05, #r-04 {
height : 10px;
line-height:0;
}

#l-06 {
width : 160px;
}

#l-06, #r-05 {
height : 15px;
line-height:0;
}

#l-07 {
width : 145px;
}

#l-07, #r-06 {
height : 10px;
line-height:0;
}

#l-08 {
width : 125px;
}

#l-08, #r-07 {
height : 10px;
line-height:0;
}

#l-09 {
width : 105px;
}

#l-09, #r-08 {
height : 10px;
line-height:0;
}

#l-10 {
width : 85px;
}

#l-10, #r-09 {
height : 10px;
line-height:0;
}

#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>