i don’t post nerdy things about what i do professionally very often, but i thought this one might be beneficial to others. there are also a few elements in the solution that i’d like to better understand, just because it’s so nice to learn. so if anyone has any further tips, please share!

on to the good stuff — the company i work for is undergoing a pretty major rebranding. we’re a division within the company and still working out some of the kinks in order to keep our part of the business somewhat unique, but i started working on our new web styling this week. here were my goals:

• affect the html pages as little as possible (as we have hundreds upon hundreds, so it’ll take some time to adjust each and every one) and do most of the design work via css
• but also try to add/change as little of the css as possible, just to keep it a little less complicated
• and use a flexible layout with the intention of being a little more accessible to mobile devices

so, most of the new styling was applied pretty painlessly (such as a new background color, new typeface, and new header graphics). it wasn’t until i got to the content area until i started having trouble. though making a flexible layout (that would expand or contract depending on the viewer’s browser window size) wasn’t difficult, the two columns i needed within were a little bit fussy. one of my columns (#navigation) needed to be a fixed width, and i wanted the other column to expand or contract as necessary to maintain the design. i spent most of the first day when i was working on this project looking around the internet for a solution, but i just could not find the right resource.

so i tweeted my frustrations and went home. but i continued to think about it all. night. long.

i found flexible layouts with css positioning by dug falby on a list apart, and tried to use the tips in this article.

however, as expressed in comment #7, the css styling in this article placed all the container height importance on one column, #navigation. which brings me to another point i needed to keep in mind with my new layout — most of the content on our sub-pages is defined by the client that “owns” the page. they may have a lot of text explaining their program (in the #copy column), or they may add more related links (in the #navigation column). either way, i needed either of my columns to determine the overall container height, not just my position:absolute column.

having position:relative on my #container and position:absolute on my #navigation column just wasn’t working. i wanted to believe that some css magic had been thought up since the article was written in 2002, but i just couldn’t figure out how to get my #navigation to determine the height of the #container and push my footer elements to the bottom of the page. i got close with a couple other solutions (though i didn’t document them and my memory, even just a few days after all this craziness, isn’t what it used to be), but couldn’t find exactly what i wanted.
i did also try to float my two columns. or at least tried to float the #navigation column, but i had two problems with this simple solution:

1. i would have to move the code of the navigation above the code for my content, which would not be very nice for users of screenreaders or for browsers without css-rendering capabilities.
2. i would have to give my #copy column a fixed size, or somehow try to find the magical minimum and maximum percentage of width to fit both columns in the #container no matter the browser window size. dislike.

however, the next day i found a very succinct example via dynamic drive.

here’s the code i ended up with:

notes:

• overflow:auto was the recommended code, though i found that in ie7, it just added scrollbars to my #wrapper in a smaller browser window. so i changed it to overflow:hidden and that seemed to be a-okay.
• anyone interested in explaining a negative margin to me? i’m not sure why this works or what exactly it’s doing, but i like whatever it is.
• _padding is apparently a fix for ie6? i figured it wouldn’t hurt to have.
• i added display:inline in order to keep #navigation aligned to the right margin of my design in ie7 (without this, it was either falling outside of the margin in small browser window or aligned too far inside of the margin in a larger browser window). why is internet explorer such a pain?

i’m pretty pleased with this solution. it’s a bummer that i had to add another div (the #container that’s around #copy), but i’m sure it would’ve been difficult to find a design solution (that made me happy) that wouldn’t involve moving things a little bit on the html pages, so oh, well. i don’t have to worry about how that’s going to work for another couple months. we will also be adding global navigation within the bar across the top of the design, and figuring out how a few other elements that are optional on the pages will layout. for now: i’m calling this a success with css!