It’s always driven me nuts that the month links didn’t line up properly underneath my site calendar. I figured it had something to do with the way I had defined the div around the calendar, but I didn’t have time to look at it until this afternoon.
The problem was that the div was defined to start at 70% of the page width and take the rest of the space on the page, but the content was centered in the div. For some reason, the table had a different center than the line following it, which caused the month links to show up askew.
Easy fix, right? Just recode the width of the calendar div. Except that it turns out not to be simple with CSS. Basically, what I want the calendar to do is this:
- Hug the right hand side of the page, most of the time
- If the window is too narrow to put the calendar to the right of the logo and still be visible, either:
- wrap the calendar to the next line, or
- scroll the calendar off the page to the right.
I don’t know a way to manage all of those things at once. I currently have changed it so that the calendar hugs the right hand side (for what it’s worth, I changed the width to 190px, the same as the min-width; eliminated the left attribute; and set the right attribute to 0). But if you shrink the browser window too far, the calendar overprints the site logo.
Actually, this isn’t the biggest problem, since the content starts to run into the nav bar before this happens… This is all because there’s no concept of “min-left,” the minimum left distance from the left hand bounding box that an element needs to respect.