CODEWITHSUNDEEP
csscss-float
Asim
Asim

Reputation: 11

Float problem in IE

#a {

margin-top:25px;
float:right;
width:390px;
margin-left:0px;
margin-right:48px;
padding-left:5px;
border:thin;
 border-color:#999999;
 border-style:solid;
 border-radius: 10px;
 margin-bottom:50px;
}

#b {
margin-top:25px;
/*margin-right:450px; */
width:390px;
margin-left:50px;
margin-right:0px;
/* padding-right:5px; */
border:thin;
 border-color:#999999;
 border-style:solid;
 border-radius: 10px;
 margin-bottom:50px;


}

But the problem is #b not appearing parallel to #a ( in same line ) in IE only

Upvotes: 1

Views: 209

Answers (2)

jasonrr
jasonrr

Reputation: 121

The order of your markup matters as well. My guess is that your markup looks something like:

<div id="b"></div>
<div id="a"></div>

Most browsers will render this correctly, but it's actually the wrong way to order block elements for floating, and IE is not compensating. The correct order:

<div id="a"></div>
<div id="b"></div>

If you do it the other way, IE renders the "b" block element and treats it like a ceiling that the "a" floated block element can't float past.

If I 'm wrong about the markup order, then it could be a width calculation problem like @wajiw suggested.

Upvotes: 1

wajiw
wajiw

Reputation: 12269

Add position:relative; to your objects. You may have to do that to whatever is containing #a and #b as well.

You may also have to add float:left; to #a

Upvotes: 0

Related Questions