Fixing floated layouts in right-to-left languages (Internet Explorer)

For right to left languages, it is common to put this CSS declaration on the body tag:

direction:rtl

This is inherited by all the elements on your page. However, I’ve found that some floated elements misbehave in RTL layouts in IE. The fix is to put the direction:rtl declaration on the text elements only. You can keep the declaration on the body tag, then reset problematic elements with direction:ltr, and put direction:rtl back on the text portions of those elements. For example, let’s suppose we have an element that looks like this:

<div class="wrapper">
  <div class="float"><img src="mypic.gif" /></div>
  <div class="float">
    <h4>Title Text</h4>
  </div>
</div>

This would be the way to do the styles:
body{direction:rtl}
div.wrapper{direction:ltr}
div.float{float:right} (would be float:left in a ltr layout)
h4{direction:rtl}

Try it if you are having troubles. It might save you a few hours of work. Or more.

Advertisements

One response to “Fixing floated layouts in right-to-left languages (Internet Explorer)

  1. Pingback: CSS programming for right-to-left languages « Web Help!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s