The Problem With Programming
One of the major problems with designing code is that no-one knows how hard it is. Even to other programmers, the subtleties of your code can be lost to them. This is because sometimes, when code is very well designed, it is very simple. An extremely complex function that took days or weeks to figure out may end up to be a very efficient and simple four lines of code. If you were to look at it afterwards, you can only exclaim, "well of course that's the way to do it," because it's already done and the thinking work has vanished, never to be fully appreciated. Let me give you an example.
In Perfect Layout, I wanted the ability to have a fluid width website that changed based on a percentage of the total window width. In addition, no matter what the size, I wanted that width to be centered, but also have a minimum and maximum width. And it has to work the same way in all browsers.
After a lot of research and trial-and-error, I came up with this solution:
#page
{
margin:0 auto;
width:80%;
min-width:600px;
max-width:1200px;
}
Whatever div you apply, the #page id to will have ALL of the attributes I mentioned above. The margin line means that there's no top or bottom margin, but the left and right margins are as big as they need to be, but also the same size as each other. This makes the div become centered, so long as it has a width. The second line, width being 80%, means exactly what it says, the width of that div should be 80% of the containing tag, which is usually the body (basically the size of the window). Min-width and Max-width are the respective pixel widths of this div. Internet Explorer 6, being Internet Explorer 6, doesn't understand the last two lines, but a small fix can be applied to it for min-width to work. Max-width won't work with IE 6 without additional stuff, perhaps some Javascript, but min-width is more important anyway, so we'll forget about max-width for IE 6.
The point is, these four lines of code are the result of AT LEAST 2 days of work. That's right! Those four lines of totally obvious code took me 2 days to figure out. How, you ask? Well, obviously I didn't start off knowing how to do it. I knew that you could center things with an auto margin on the left and right, but I also knew I had to have a width for that. What I didn't know was that a percentage width would work with the centering margin code. I remembered something about not combining different kinds of measurements in the same class (id). I remember trying several combinations of divs inside the #page one, trying to apply the width internally, but still having the centered effect work on them. Nothing worked. Finally, I just figured I'd tear the fabric of spacetime and apply a percentage width to an auto margin. To my great surprise, I didn't fall over dead for breaking some rule, but it in fact worked better than I expected! In these rare moments when I make a similar breakthrough, I tend to jump up and down (literally) while screaming "YEEEESSSSS!" inside my head. Anyway, it worked. What's more, I later found out that min-width and max-width worked ON THE SAME CLASS (ID) without needing to be applied to internal divs or an equivalent measurement unit.
What's more, I've seen a lot of layouts in my day, and so far I've never seen anyone implement anything like this. I found this one after a quick search, which sort of has the same effect, but works completely differently (and is far less accurate). So, next time you look at a programmer's code, don't assume that it's as easy as it looks. I'm not sure if I'm preaching to the choir here, but this is the first time I've really thought about this. If you're a programmer, you probably already know this, and if you're not, you're already baffled by most of the code we programmers write. I guess what I'm tring to say is that programming is usually not like putting a machine together from the parts you are given. It's more like inventing entirely new parts to make an entirely new machine, which may end up being simpler than a pre-built one. The investment of time in code that is ultimately simpler results in a machine that "should have been done already" because the finished product is "too simple." Not the best analogy, but I'm trying. I did mention that this is the first time I've really though about this?
Since I wrote this, and after I released Perfect Layout, I became aware of a much more complicated system that does virtually the same thing. It's called The Jello Mold technique. I hereby assert that I developed my method in a code vacuum, trying intentiontally to build what I have described above based on pure speculation on my part that such a structure could exist to allow both fluid and rigid advantages to appear in one design.
By Dwight House (March 18th, 2007)