Search for a Functional CSS Layout


For over a year I've been struggling to find a simple, functional layout that could be easily adjusted and didn't require tweaks for different browsers. As you will be able to see from the design of this site, I'm mostly a programmer and not much for design. Most of the sites I create are heavily AJAXed, which requires relatively new browsers, so compatibility with anything older than Internet Explorer 6 isn't a big concern to me.

I've never used frames for a site because I agree that frames are "evil", but I like the framed layout and the ability to have easily resizable content panels. I first experimented with absolute positioning using fixed left, top, width, and height set using javascript in the body.onload handler. The results were never satisfying because the page didn't load smoothly, especially bad if the page loaded slowly.

I only recently realized that the left, right, top, and bottom properties could be used with absolute positioning rather than the width and height properties, thus making a fluid layout that didn't require JavaScript resizing. The css is simple and works great in Firefox (even old releases like Phoenix), Opera (8.5 was the oldest I tried), Safari, and Internet Explorer 7. However, I soon found that IE6 doesn't properly support auto width and height; even with setting the body and html width and height to 100%, the elements simply collapse.