April 29, 200917 yr Hi all, I am facing a difficult problem. In short I have the following html code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Test</title> </head> <body style="direction: ltr"> <div style="border-style: solid; width: 150px; height: 150px;"> <p> hello </p> </div> <div style="border-style: solid; width: 150px; height: 150px; float: right;"> <p> to you </p> </div> </body> </html> This html will display two divs with borders, on the left and the other is floating to the right. Notice that the page direction is ltr. If I change the page direction to rtl then the first div will be aligned based on the direction while the floating div will remain in its place. I need it to align to the left since the page direction has changed. I can do this by using a javascript that will traverse some classes with the float element and then change it based on the page direction, but I need more generic way to handle this problem. Can anyone give me a solution or a hint?
April 29, 200917 yr If you float both divs left? what happens then? they reverse the order? I always thought ltr and rtl just determined content flow, not document flow. *shrugs* Your explanation is a little difficult to understand, but i think i know what you mean, can you not just float both divs left? so they're floating one beside the other? or will it switch them around?
May 2, 200917 yr Author OK, let me explain it in more details The code snippet above will generate a page like the following: When I change the direction of the page to "rtl" you can logically assume that the resulting page will become something like this: But the actual page when changing the direction to "rtl" for the snippet above is: This problem is cased by div 2 since it is floating to the right. The browser should respect the context in which the float direction is, but it is not doing so. Any idea on how to fix this issue?
Create an account or sign in to comment