cssKnowledge { holes: tons }
I’ve spent the better part of today wrestling with the layout of a page that in theory should probably be much easier to build than it was. A simple two-column fixed-width layout (navigation is left 1/3, content is right 2/3). That part was not what caused me trouble. I used a bastardization of the zeldman.com stylesheet to reliably draw the first two columns. And the two additional columns that appear within the original content section of the page provided little trouble - although a bit more than the first two columns, I’ll admit.
Where I ran into serious problems was creating lists in these two nested content columns. More specifically, it was getting the lists to be indented properly (under already indented headings which were themselves indented under another heading). When I would add some margin-left space on the ul tag, the silly thing would actually move left (in some browsers) - the exact opposite behavior I expected. I never did any hardcore box model tests, but I would up putting margin-left values on the li tag instead, and that did the trick.
I think what was going on was that when I set a value for margin-left it actually took out the built-in margin that an unordered list is given, and the margin I was giving it (20px) was actually less than this default vaue. If anyone would like to comment and clue me in to the true cause of this behavior, I’ll give you a dollar.
Frankly, I did so many tests and ran the page through browsercam so many times, I don’t exactly remember what was going on. I was in “build it and get it to do what you want it to do” mode, not “test it and figure out the root of the problem mode,” even though the latter would certainly save me time next time around. With three major sites due in the next 1-3 weeks, I need immediate gratification. (And I won’t even go into what a mess the css file is now. No organization whatsoever.)
I’m don’t know yet what I learned from this 8-hour exercise down Frustration Lane today, but I hope to soon. All I really found out is that even though I have been able to accomplish really cool things using just CSS for layout over the last few weeks - and indeed I’ve made great strides along the way - there are serious holes in my understanding of how things interact with each other.
