Forum Moderators: not2easy

Message Too Old, No Replies

IE6 Float Problem

         

turtle

5:15 pm on Aug 12, 2004 (gmt 0)

10+ Year Member



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

}

Here's the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

createErrorMsg

7:30 pm on Aug 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE may be adding extra margins that you don't know about. IE tends to put default margins on elements where other browsers do not. The only way around this is to explicitly set your own value (frequently zero) for margins on everything. One of our moderators recently shared a little trick to help do this for all elements in a document...

* {margin: 0;}

...you then need to explicitly set margins on anything you need margined, but you'd end up doing that anyway, right?

turtle

8:34 pm on Aug 12, 2004 (gmt 0)

10+ Year Member



Thanks for the suggestion about the margins, this was indeed 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 on the div which fixed the problem.