3 replies [Last post]
trebor
Offline
newbie
Last seen: 18 years 36 weeks ago
Joined: 2004-03-26
Posts: 5
Points: 0

Hello:

I am having a float problem with IE6. I have two divs which are inside of a container div. One div contains text and is floated left. The other div contains a sidebar, the left margin of this div is set so that it appears directly to the right of the floated left div.

IE6 is displaying the sidebar div below the floated left div, instead of directly next to it as it does in other browsers. (the left margin is rendered correctly for the sidebar, however it is placed below all the text in the floated left div)

Any ideas how to correct this? (page displays properly in Safari, Netscape 7, Opera 7etc) Thanks for the help.

Here's the css:

.newscontainer {

width: 558px;
margin: 0px;
background-color: #FFFFFF;
z-index: 1

}

.news {

float: left;
width: 345px;
margin: 0px;
padding-left: 5px;
padding-top: 2px;
background-color: #FFFFFF;
z-index: 1

}

.rightcolumn {

width: 208px;
margin-left: 350px;
padding-top: 2px;
background-color: #FFFFFF;
z-index: 1

}

trebor
Offline
newbie
Last seen: 18 years 36 weeks ago
Joined: 2004-03-26
Posts: 5
Points: 0

IE6 Float Problem

Ok, I figured out the problem. A 3 pixel margin was being added to one of the divs, making it too big to fit in the container. I put a 3 pixel negative margin which fixes the problem.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE6 Float Problem

You could also add
display:inline;
in .news
it has no consequence on Mozilla, Opera....

kojiro
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-08-11
Posts: 28
Points: 0

IE float-margin bug

DanA wrote:
You could also add
display:inline;
in .news
it has no consequence on Mozilla, Opera....

You might run into this problem again, so pardon the unnecessary second explanation.

DanA is referring to the IE "float margin" bug. IE doubles the horizontal margins on floated boxes. Although "display: inline" has no meaning when applied to floats, for some reason it prevents IE from doubling the margins, thus solving the problem.

All the good sigs were taken.