sKunKbad Posted August 17, 2007 Share Posted August 17, 2007 I'm probably overlooking something basic, but this code works in all common browsers except IE6 and IE7, and I'm wondering if anybody can spot something wrong with it. <!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> Check it out in Firefox, Opera, or Safari and you will see how the text floats through the divs. Quote Link to comment https://forums.phpfreaks.com/topic/65355-solved-css-float-river/ Share on other sites More sharing options...
TheFilmGod Posted August 17, 2007 Share Posted August 17, 2007 I'm probably overlooking something basic, but this code works in all common browsers except IE6 and IE7, and I'm wondering if anybody can spot something wrong with it. Check it out in Firefox, Opera, or Safari and you will see how the text floats through the divs. happy to help you out. Quote Link to comment https://forums.phpfreaks.com/topic/65355-solved-css-float-river/#findComment-326375 Share on other sites More sharing options...
sKunKbad Posted August 17, 2007 Author Share Posted August 17, 2007 I'm anxious to see the solution, thanks for your time. Quote Link to comment https://forums.phpfreaks.com/topic/65355-solved-css-float-river/#findComment-326376 Share on other sites More sharing options...
sKunKbad Posted August 17, 2007 Author Share Posted August 17, 2007 I fixed it. All I had to do is add a 1px padding to any side of the divs. Quote Link to comment https://forums.phpfreaks.com/topic/65355-solved-css-float-river/#findComment-326808 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.