by Jim
Jul 07, 2006 6:56 PM
I love DIVs. I hate tables - except for tabular stuff, then they're OK.
DIVs can be frustrating to work with sometimes, though. I've been seeking the perfect layout for my website and blogs. There are a lot of examples online - this guy has some great designs. But none of these were working for me. My "holy grail" of layout is a two-column design.
Typically a layout like this would expand with the page, which can get weird at extremes of screen resolution. Or, it would have a fixed width, which doesn't work well when the content gets too big - do we chop off the extra, or let it hang over onto the background?
I have pages that (sadly) have very little on them, and others that have too much - images, or especially code snippets with long lines. I want a minimum width and height for the central DIV, so that it looks nice and aligned with small amounts of content. But it should fail gracefully - that is, expand with the content, such that the whole screen scrolls, never the content box.
Oh, and it has to work in Firefox and IE. This is what we call "non-trivial." This little style sheet fix for differing interpretations of min-width and min-height helped. After a bit of searching I finally found the magic property among the obscure values for the CSS display property, which makes a DIV expand with content in Firefox.
You're looking at this layout - at least until I redesign the page. Again. It's a learning experience. Here's a cleaner example.