I'm trying to simulate the frame structure of my photo album ( http://www.krakatoa.it/kpa/ ) with CSS. I successfully made it with FireFox. You can see the result here: http://www.krakatoa.it/kpa2/ . The problem is with Internet Explorer. I tried to make an IE-only CSS. This is what I made so far: http://www.krakatoa.it/ot/ie.php But, as you can see, I can't fix the problem with the left menu. Can you help me?
I've written a tutorial about that. You can find it at: friendlybit.com/css/frames-or-iframes-with-css/ (sorry, I can't paste live links yet :/ )
I don't understand how I can solve my problem... I mean, the layout I need is a little bit more complicated than those you talk about...
I had a quick tinker ... I put a #wrapper div around both your sidebar and content divs and rewrote your css as follows ... body { margin: 0; padding: 6em 0 6em 0; background: #fff; overflow: hidden; } div#header, div#sidebar, div#footer { position:absolute; left: 0; } #header { top: 0; z-index: 10; width: 100%; height: 6em; border-bottom: 1px solid #000; background: #aaa; overflow: hidden; padding: 1em; } #sidebar { width: 12em; height: 100%; overflow-y: scroll; border-right: 1px solid #000; background: #ccc; padding: 1em; } #wrapper { height: 100%; width: 100%; margin-bottom: 6em; } #content { width: 100%; height: 100%; overflow-y: scroll; padding: 1em; margin-top: 6em; margin-left: 12em; } #footer { bottom: 0; z-index: 10; width: 100%; height: 6em; border-top: 1px solid #000; background: #aaa; overflow: hidden; padding: 1em; } @media screen { body>#header, body>#sidebar, body>#footer { position:fixed !important; } } Code (markup): It works in IE, but getting it to work cross browser would take me a bit longer, so you are on your own there, although I think you are planning on producing browser specific pages with browser detection scripting? Good luck with it