IE 6 moves the main content 300 px to the right

HTML & CSS
1

Hello Together,

im a kind of css newbie and knock my head against the wall :frowning:
i got a problem with ie6 and this site:
www.dominikanermuseum.de/cms

My main content moves to the right and i dont know why:
[URL=“http://dominikanermuseum.de/pic/eror.png”]
here is a screenshot of it ->

Thanks for any help.

Rob

2

thanks very much Ryan
Content{display:inline;} worked

:slight_smile:

3

Hi, untested because I’m lazy (lol) but the double float margin bug is happening here. Add display:inline

.front.sidebar-left #content{display:inline;}
4

Glad it worked :). You’re welcome.

5

I don’t have IE6 here at home on someone else’s machine, however I’m thinking that even tho the left col has a negative right margin, IE6 may still be doubling the content’s positive left margin (plain old double-margin float bug).

This looks like a very convoluted version of the Holy Grail layout (wrapping the left col around with a negative margin) and the 15 classes per element make it hard to read and work with. Since your main page itself looks to be a static width, I know IE6 can do this ok (it can’t do flex-width too well, as it calculates %'s not of the container but of the body).

For now, just see if every instance of float with any side margins is also accompanied by a display: inline to remove that particular bug (it actually doesn’t really hit ALL side margins on floats but this is easiest to start).

See what that changes, if anything.

*edit, since this is a template (Drupal?) they usually account for such common bugs. It may end up being easier to just do regular Holy Grail OR to float the main content to the right and the left col left. Either way still keeps your content first.