I’m working on a new site. There’s still much to do, but I have a failure, that I don’t get fixed by myself.
If I open this site in Chrome, everything looks nice and as it should. If I open it in IE, it’s crap… but that’s ok ;)
But if I open it in Firefox, it’s crap as well. It looks like Firefox ignores the “max-width=100%” and stretches the image as large as it can be. So the layout is over 100% width…
Do I look at the wrong position or where is the “bad” code?
@Webbster; it’s falling apart in every browser not only those you mentioned. Chrome does same thing on 24″ monitor like IE and FF on smaller ones. You need to wrap the whole thing in container at least something like this.
@jurotek; thanks for your answer. I tried this, but it didnt’t work for me…
After putting a container with max-width: 1200px or something similar, the layout looks like this: http://yellow-bull.bplaced.net/
And if I’m setting 1200px to something greater, the whole design looks like in the first post, the image is to big then. I already found out, that, if I’m using a fixed width for the set_content-Element, everything is ok. But unfortunately that’s not, what I want.
I’m not sure this will solve your problem. But, if removing “float: left” on div id “primary” and also removing the “max-width” on div id container, it seems to work better (at least in Safari).
The lower part (bellow the nav) keeps centered and have the same width as the upper part (header).
Note. Looks like the header image is not big if enough for *big* screens – over 110 em it will not fill out over the white area. But that is quite wide, so maybe nothing to worry about…
@magnus_vb: Yeah, it’s working! You are my hero of the week! :D
And thanks for the note; I will put a max-width with a very high amount over all, so at really big screens, this shouldn’t be a problem. Thank you guys!