Lars wrote: > For a transcription that I am doing, I need syncronised parallel > texts with a dividing line running down the gutter. If I understand > the CSS box model correctly, the following CSS would do the trick: >
<SNIP> > This works as expected in Amaya 9.4 and Internet Explorer 7 Beta 2 > (actually an updated Beta 1), but not in Firefox 1.5.0.1 and Opera > 8.52, where there is no gap below the shorter text. > Where have I gone wrong? With the reputation of Opera and Firefox, I > expect these to render the code correctly and Amaya and Internet > Explorer to fail rather than the other way around. > > <URL:"http://www.forumnavale.se/test(div).html"> > > > Lars Bruzelius Lars- At quick glance, one way you could do this is to clear the first two divs before floating the next two. Floats are supposed to "rise" up as far as they can. The second left float pays no attention to the right float "above" it and instead settles under the first left floated div. This is the proper behavior according to the spec. So Firefox is correct, IE and Amaya are wrong. So all you need to do is apply "clear:both;" to those two containing divs. Your code will then look like: <div style="width: 100%; clear:both;"> <div class="l">Short text</div> <div class="r">Long text</div> </div> <div style="width: 100%; clear:both;"> <div class="l">More text</div> <div class="r">Yet more text</div> </div> The clear on the first one isn't really necessary, but if you're going to add the clear to a class and apply it to those divs, it won't hurt. Regards, Ron ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
