Databases
StackOverflow2013
Postsdbo
POCSS Float Working in All Browsers Except IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Float Working in All Browsers Except IE
    text
    copied!<p>I have a website that renders perfectly in Safari, FF, Chrome, and Opera. However, in IE, my website renders slightly off. </p> <p>HTML: </p> <pre><code>&lt;div align="center" id="headerdiv"&gt;&lt;div id="log"&gt;&lt;font id="subtitleAttribs" onclick="login()"&gt;Login أدخل حساب&lt;/font&gt;&lt;/div&gt; &lt;a class="infoHme"&gt;&lt;font id="titleAttribs" onclick="home()"&gt;T h e&lt;font color="#999999" size="6px"&gt; | &lt;/font&gt;A r t i s a n a t&lt;font color="#999999" size="6px"&gt; | &lt;/font&gt;N e t w o r k&lt;/font&gt;&lt;span&gt;Home دار&lt;/span&gt;&lt;/a&gt; &lt;div id="lang"&gt;&lt;font id="subtitleAttribs" onclick="arb()"&gt;العربية&lt;/font&gt;&lt;font color="#999999"&gt; | &lt;/font&gt;&lt;font id="subtitleAttribs" onclick="eng()"&gt;English&lt;/font&gt;&lt;/div&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#log { float: left; padding: 5px; } #lang { float: right; padding: 5px; } #titleAttribs { color: #6699cc; font-size: 26px; } #headerdiv { background-color: #faf8cc; margin: 0px 45px 0px 45px; } </code></pre> <p>In my code snippet there are four parts. First, "headerdiv" is the container. Second, "log" is the div that should be on the left. Third, "titleAttribs" is text that sits in the middle. Fourth, "lang" is the div that should be on the right.</p> <p>"log" and "lang" float so that they are on each side of the "titleAttribs" text. My problem is that in IE "lang" ends up rendering below "log" and "titleAttribs" on the right. I test my code with a Mac so it is hard for me to test in IE. When I use a PC and run the .html and .css files in IE9, everything renders just fine. However, when I go to my website from the internet, IE has the rendering problem, which makes even more difficult for me to resolve.</p> <p>Would anyone know an easy way to correct this issue without having to make too many changes. I understand that I could add widths, however I tried with no luck. Also, the website url is: <a href="http://www.imkenliya.com/artisan_network.html" rel="nofollow">http://www.imkenliya.com/artisan_network.html</a> </p> <p>If you run the website in IE, you will notice that the English language button below the search box is not in the yellow banner to the right of the title, which is the rendering problem.</p> <p>Thanks,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload