Databases
StackOverflow2013
Postsdbo
POHow do I fix this simple CSS floating issue in IE?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I fix this simple CSS floating issue in IE?
    text
    copied!<p>I've got four <code>div</code> elements floated to the left. The third <code>div</code> is cleared.<br> In Firefox and Chrome the elements are positioned as expected: The first and second <code>div</code>s are adjacent to each other and are above the third and fourth <code>div</code>s which are also adjacent to each other.<br> IE7 on the other hand places the fourth <code>div</code> adjacent to the first and second <code>div</code>s with the third <code>div</code> below.</p> <p>I know I can fix it by adding a <code>br</code> element after the second <code>div</code> but I'd rather not edit the markup if I don't have to. Is there a more elegant way of fixing the problem?</p> <p>I've been trying to Google for a fix for a while now but haven't found one, which is rather surprising considering how elementary the problem seems. Perhaps I'm missing something obvious, is there a reference site that lists simple CSS issues like this one or am I just ignorant about basic CSS?</p> <p><strong>Edit:</strong> I've made the sample code slightly more complex after Nazgulled "solved" the problem (see the comments). There are now four <code>div</code>s instead of three and the third <code>div</code> is cleared instead of the second.</p> <p>Here is the complete source code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head runat="server"&gt; &lt;title&gt;IE Float Test&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt; &lt;style type="text/css"&gt; div { width: 100px; height: 100px; color: white; font-size: 3em; float: left; } #divone { background-color: red; } #divtwo { background-color: blue; } #divthree { background-color: green; clear: both; } #divfour { background-color: purple; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="divone"&gt;one&lt;/div&gt; &lt;div id="divtwo"&gt;two&lt;/div&gt; &lt;div id="divthree"&gt;three&lt;/div&gt; &lt;div id="divfour"&gt;four&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is what is looks like in Chrome:<br> <a href="http://img301.imageshack.us/img301/3135/chromev2tp4.png" rel="nofollow noreferrer">Chrome sample http://img301.imageshack.us/img301/3135/chromev2tp4.png</a></p> <p>Here is what is looks like in IE7:<br> <a href="http://img111.imageshack.us/img111/8195/ie7v2cg3.png" rel="nofollow noreferrer">IE Sample http://img111.imageshack.us/img111/8195/ie7v2cg3.png</a></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