I created the design that became my new Mac software blog Tagamac by accident. I was in between web design clients, but had just bought a new font (Estilo) and wanted to play around with it. I started messing around in Photoshop and pretty soon I had a mockup image that was quite intriguing. Aside from Estilo, which just oozes personality, I had come up with a border that was a lot different from any of my previous designs: it extended a little over halfway across the from both sides, but didn’t go all the way across. The top and bottom complemented, but didn’t complete each other.

I had to create the HTML just to see if I could. This would not be a difficult design with tables, of course; heck, I could have Photoshop figure out how it wanted to break it up for that. Divs, however, were another matter. After fighting the good fight, I have a method that I think is pretty slick. In fact, the only thing I regret is that I had to use a pixel fixed width; the squishy fixed width that I’m using for the Idol Bat, One Crayon, and this site could play no part (it’s squishy because it’s in ems; if you resize the text, the width of the page will grow to keep the line lengths similar).

I doubt other people will have quite the same fixation with asymmetrical designs, but I figured I’d outline how I achieved the Tagamac design here. If you want to see exactly how it’s done you can of course check out the source.

The problem I ran up against was not getting the middle main area looking good, but making the borders I’d created extend to the edges of the screen. I solved my problem by using two main header divs and two footer divs. Each div is 50% the width of the screen. For the headers, the left header has a background image along the bottom for the border; for the footers, it’s the right footer. Then each of the header divs has a content div. The content divs are each half the width of the whole page (which is 800px), have an ‘auto’ outer margin, and contain images that hide the background in the parent divs.

And voilá: an asymmetrical page! Of course, the header and the footer have to be broken in half (so there can’t be anything that spans them) and the page width is a fixed pixel width, but overall I’m pretty happy with it. Asymmetry is a relatively easy way to make websites that stand out (from my standard designs, if nothing else).