Back In CSS-Layout Hell
August 11th, 2008 by ComputerBob
Regular readers of this Journal can see that this site looks different today. That’s because, late last night, I discovered that the 3-column CSS layout that I had been using for this site for the past month has a fatal flaw when used on a site like this one.
The problem only appears when you click on an internal hyperlink within one of my web pages. For example, if you were reading My Debian Adventure, there are several internal page hyperlinks at the top of that article. If you had clicked on one of those links, it should have simply scrolled down to the hyperlinked target on that same page. Instead, it reloaded the page with a huge chunk of the top of the left navigation column missing and with a huge chunk of the top of the content in the center column missing.
You might have experienced that same flaw if you spent much time in my Survivors Forum. If you had navigated into the various message threads and read each thread completely, then you wouldn’t have seen the problem. But if you clicked on any of the SMF forum links that were supposed to take you to “the latest” post in any particular message thread — a task which used the same type of internal hyperlink that I described above — then instead of seeing the entire message thread and having it automatically scroll down to the latest post, it would have displayed only the content of the latest post itself, at the top of the page, without a huge chunk of the top of the left navigation column and without the previous posts that should have displayed above the latest one.
After troubleshooting the problem until 3:00 this morning, I solved it by removing the massive padding and massive negative margins that my previously chosen 3-column layout had employed to make the background of the two shorter columns “stretch” to match the length of whichever column was longest.
The downside of this current non-background-stretching layout is that the background colors of the left navigation column and the right sidebar now end exactly where those two columns’ content ends, instead of automatically extending down nicely to match the length of the longer center content column.
The upside is that everything displays now, without cutting anything off. Of course, the upside far outweighs the downside.
I’ve found a couple of alternative CSS 3-column layouts that I’ll be considering in the near future. In the meantime, I hope that you enjoy the new look — it may be here awhile.
Permalink:
http://www.computerbob.com/wp/back-in-css-layout-hell.php
Tags:
Coding, Personal, Web Development