I am trying to align 2 button next to eachother in firefox. Works fine in IE.

I believe it's related to the divs that have position:absolute.

I have cut out all the extra HTML to just get the basic SPAN and 2 DIVs that cause the problem. Have a look in IE to see what it should render like.


[span style="display: inline-block;"]
[div style="position: relative; height: 20px; width: 70; background-color: blue;"]
[div style="position: absolute; top: 0; left: 0;"]
1
[/div]
[/div]
[/span]
[span style="display: inline-block;"]
[div style="position: relative; height: 20px; width: 70; background-color: red;"]
[div style="position: absolute; top: 0; left: 0;"]
2
[/div]
[/div]
[/span]


p.s. How can i paste HTML in here. Tried using PRE.

p.s. How can i paste HTML in here. Tried using PRE.

you'll need to replace the bracket with lt; gt; html entity

This works in both FF2 & IE7

<div style="height:20px;width: 70;background-color:blue;float:left;padding:0;">1</div>
<div style="height:20px;width: 70;background-color:red;float:left;padding:0;">2</div>

I'm guessing inline-block is the culprit?

Try http://www.hedgerwow.com/360/dhtml/css-display-inline.html

I realise there are other ways of putting 2 DIVs next to eachother. But i need it so it's using the SPAN and 2 DIVs they way i specified. This is because of other HTML i have removed that lays a few DIVs over top of eachother.

So if you can get my HTML working just by changing the styles or something, that would be great.

Actually, float:left might be what i want in the SPAN. Trying some stuff now.

You should not have divs within spans. Spans are for wrapping inline elements like links or highlighted text. Use Divs to wrap Divs. Inline-block is not supported by all browsers either.

To put two divs next to each other I would do it like this

[div id="wrapper"]
[div id="left" style="float:left;width:30px;"]other divs and content here[/div]
[div id="right" style="float:left;width:70px;"]other divs and content here[/div]
[/div]

last edited by Idol at 17:29:15 28/Mar/08