Hi Guys, Here the layout: http://photos4u.pytalhost.com/test1.html On IE8 and newest Firefox the design looks allright, but on IE6 the right box moves to the bottom. Here the code, hope anybody can help me as I am getting frustrated with the layout issues on different browser: #container { width:99%; max-width:99%; height:99%; border:2px solid black; } #header { width:100%; height:100px; border:2px solid blue; background-color:blue; } #left { width:30%; height:600px; border:2px solid blue; float:left; background-color:black; } #right { width:70%; height:600px; border:2px solid blue; margin-left:30%; background-color:grey; } #footer { width:100%; height:50px; border:2px solid blue; background-color:yellow; } Code (markup): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <link rel='stylesheet' type='text/css' href='test1.css'/> </head> <body> <div id="container"> <div id="header">tsadsssssssssssssssssssssss</div> <div id="left"></div> <div id="right"></div> <div id="footer"></div> </div> </body> </html> HTML: Any idea how I can set up so it's compatible with IE6 as well.
Hi ! I found the error. Basically the 2px border was putting the width of the left and right container to over 100%, which is why IE6 could not manage it. I've decreased the sie of the left container so that it was 100% including the border. Another issue is: The right and left container. I have to do margin-left 30% to get the right container to the position it is now. Why can't I specify the margin distance from the left box to the right box rather then the left edge of the page?
Mm, when you have two floats, they are boxes who can "see" each other, so if you have a left box and a right box, both floated, any left margin on the right box will bump into the other (left) float. Just like in real life. What's confusing is when you have a float (on the left like you do) and a non-float (a regular static block box) on the right, because IE can act differently here: If that static, non-floated box has Haslayout tripped on it (you set a height, or a width, or some other trigger on it, read about them here), then IE will act like that static block is also a float! Meaning, it will bump up against the float instead of sliding underneath the float like it should (only the inline stuff inside the static block should "see" the float, but not blocks!). Modern browsers let the static box ignore the float and then yes, a left margin on that static box would push away from the left edge of the container. Take a look here in IE7 and some Modern Browser and you'll see it with the H2 box on page 3. What I usually do is either try not tot trigger haslayout on the static block (just don't set a width on #right, and instead just set a left margin equal to the width of the left float). If I can do that, all browsers will act the same. Well except IE6, who still does the 3px jog between the left float and the static block. I can then give the left float a negative left margin of 3px to take care of that. IE6 also has a bug where if you have two boxes, each 50% wide, they won't fit side-by-side because IE6 uses "Redmond Math": 50% + 50% = 101%... okay it's prolly just a rounding error, but what you saw earlier on your page is called "float drop" where, if IE6 thinks it can't fit two blocks side by side, it drops one. Modern browsers will allow a bit of overflow out of the container before dropping, but IE6 is very picky, mostly due to either rounding errors or the various bugs where little bits of extra space appear (like the 3 pixel jog bug). For IE6, always do something like two boxes, each at 49% width to make them fit. #container doesn't need that height: 99%. Unless you've set height: 100% on both the html and body elments, #container won't know what 99% means, and default to height: auto (the default anyway). If you DID put height: 100% on the html and body tags, then your page can't be taller than someone's screen, because the screen will be the 100%. Instead, give container a min-height of 99% so it can grow if needed. But usually you can get away with setting no height and just making sure the body has a decent background colour. Or, if you just want #container to always contain the float instead of shrinking to the height of its non-floated content, read Gary's Enclosing floats page. I'm lazy and tend to use overflow: hidden on my containers, but watch out, overflow has a Day Job, which is to deal with overflow if you've set any dimensions. Solution: don't set dimensions like height with overflow if you're using it to contain floats. As a note, know that you usually don't have to say width: 100% on static blocks... that's the default. So you're only doing it when you need to trip Haslayout or something.