CODEWITHSUNDEEP
csshtml
John Livermore
John Livermore

Reputation: 31343

DIV's behaving differently in IE vs Firefox

If you run the simple HTML page found at:

http://ss.bigwavesoftware.net/2.htm

in IE8 and FireFox 3.5.8, the DIV's display differently. In IE they behave as block elements and FireFox they behave as inline elements. I need them to behave as inline in both browsers. Can someone suggest a workaround to make them display inline in IE8 as well as FireFox?

<html>
<body>
    <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

Upvotes: 1

Views: 2908

Answers (4)

mercator
mercator

Reputation: 28656

Add a doctype at the very start of your document. It's being rendered in quirks mode. E.g.

<!doctype html>
<html>
... etc.

Oh, and what exactly do you mean by "behave as inline"? Do you simply mean you want them to appear side-by-side, or do you actually want the width and height to be ignored (as Tom pointed out)? Because you won't be able to do the latter for floated elements. The display: inline is useless on floats (except to fix IE6 bugs), because "inline" floats automatically turn into block.

Upvotes: 3

Tom
Tom

Reputation: 22841

You can't set height and width on inline elements. If you want the boxes to be laid out as they are in Firefox, remove the display: inline and float the left-hand box.

Upvotes: 1

Robusto
Robusto

Reputation: 31913

Reverse the order of your divs and it will work. That is put the first one second and the second one first in the markup.

<html>
<body>
     <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
     <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>

</body>
</html>

Upvotes: 3

NebuSoft
NebuSoft

Reputation: 4010

use float: left instead of float: none in the first div (the one on the left).

<html>
<body>
    <div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

Upvotes: 0

Related Questions