Previous Message
Next Message

Parallel texts

Sent by Pringle, Ron on 15 March 2006 19:07

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:


> This works as expected in Amaya 9.4 and Internet Explorer 7 Beta 2 
> (actually an updated Beta 1), but not in Firefox 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:"">
> Lars Bruzelius


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 style="width: 100%; clear:both;">
<div class="l">More text</div>
<div class="r">Yet more text</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.

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Possibly related: