New Layout?

Here is a mock-up of a layout I started taking a crack at today. Seems simple enough, doesn’t it? Well it isn’t.

The key to this design is placing gaps between the various block elements in the layout. Most of that is a simple matter of defining margin values on each of those elements. However we run into problems when trying to put gaps between the three columns.

One other feature I want is to keep all three columns the same height, just like in skidoo too This is achieved through some CSS trickery best explained in the original skidoo layout. At the moment, I know of no real other way to achieve this effect, short of using some kind of javascript.

Another effect I want is that, since we’re introducing gaps between elements, each element should have a border around it to futher define the border of each element. It makes things look more clean, imho.

So, first thing’s first. How do I create a gap between the three columns? I don’t. I make it look like there is a gap. I can do this by turning those 1px black vertical borders you see separating the three columns in the a href=”http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html”>skidoo too layout into 10px wide borders that match the background color users will see in the gaps between other elements. That’s pretty straightfoward.

The next problem is I need to wrap all three columns in a 1px border. Long story short, I can’t wrap any of these columns in a single DIV or other such element and apply a border. If I did, those DIV blocks would only run as tall as the content for each column. Remember, a href=”http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html”>skidoo too fakes the appearance of three columns carrying the full height of the page. In reality, each of the three columns have their own element that is only as tall as the content for that column. You can’t apply a border to them because the bottom for the 3 separate columns will be in different places.

Okay, so what to do here? We’ll have to use several other elements to paste a border around each column.

First thing is to create the side borders. The middle column’s side border is simple enough. I can add in a new DIV block, just below the element now being used to create the 10px wide gap, and apply side borders to it. That gets me the side borders for the middle column. I do the same, but put the DIV as the parent of the 10px gap creating element. This creates the right border for the left column, and the left border for the right column, or the inside borders for the outside columns. :)

So next is the outside borders for the side columns. This is simple enough, I can insert a new DIV element that becomes a parent to the element creating the borders used as the background colors for the side columns. Set the side borders for this new DIV to match the others, and we’ve got side borders for all three columns in place.

Now the really tough part: top and bottom borders.

I could use this newly created parent DIV that creates the side borders for the side columns. Just one problem: this border will carry across the top of the “gaps” between the three columns, destroying the illusion.

So my approach is to take the element generating the gaps (created using borders that match the background color) and setting top and bottom margins to -1px.

That, in theory, should work. It doesn’t. IE and FireFox both have their problems with this approach, and that’s been driving me nuts all day.

The solution I’ve come to (for the moment, anyways) is to use the element parent to the gap-creating element. This is the same element used to create the inside borders for the side columns. Setting -1px top and bottom margins on this seems to work better for IE and FireFox. But there are still problems.

Long story short, via trial-and-error I’ve found the most compatible solution is to stick a 1px vertical padding on the element that generates the background colors for the side columns. I then apply a -2px vertical margin on the element used to create the inside borders on the side columns. This seems to work.

A few loose ends to clear up. IE still needs some hasLayout hackery to get things rendering correctly. There’s no science to figuring out what elements need the hack (or which one) except by trial-and-error. Once that was squared away, things started working as intended.

Believe me, I was very surprised this actually seems to work. Opera, FireFox and IE 6 all seem to be happy. I’ll need to do a lot more testing, debugging, and cleaning of the code, so my soon-to-be new layout is not ready for prime-time yet. And in fact, when I do “release” it, I’m going to tell you not to use it, ever, because it’s ugly and certainly as buggy as any CSS layout. But you won’t really listen or care, and that’s okay. :)

Anyways, I said I was going to share, so here it is.

This is a simplified layout that I used to figure out the column-gap problem. A lot of the CSS in the demo below isn’t in this example, so I suggest looking at this first.

And here is the full-out demo of what I have so far. Note that the relevant CSS is being imported from here and here. The latter is what you should look at as the former is just bits of skidoo extracted and simplified a bit and nothing veterans to this site haven’t seen before.

Very fun stuff (once it’s working).

OH! One last bit of info. There is some additional padding on the side columns to offset their real boundaries with the appeared boundaries.

Again, DO NOT USE THIS STUFF IN A REAL WEBSITE. It’s far from tested and perfect. It’s here to 1) show you what I’m working on and 2) as an educational tool for CSS developers and 3) a “proof of concept”.

I’ll post a real working version of this sometime soon (hopefully).

Advertisements

0 thoughts on “New Layout?

  1. Thanks for this and all of the working layouts you’ve developed! They’ve given me wonderful jumping-off points for coding my own sites, and I really appreciate it. Can’t wait to see the final version.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s