I’ve been experimenting with few css layouts all day long as a practice to get more understanding how it all behaves and whether I can build a decent stable layout from scratch which works in all browsers and also conforms to some css standards which I still don’t have a good understanding of what they are.
It seems to me that there’s so many diferent ways to do things with CSS and make it work but I am asking myself, do I follow some acceptable practices. I don’t know.
So I’ve been playing all day long with 2 column layouts hoping to learn something. I started with css table properties layout and after few hours I gave up cause I encounter problems how it behaved when I added some padding to right content cell and the left nav moved down by the same amount. It felt to me that it was too rigid and not flexible enough and also I don’t have a good grasp of behaivior of css table layout properties so I gave up.
So I moved on to floated layout. It was better, but the clearing issues were bothering me even tho I knew how I could handle that.
So I moved on to a third layout where I completely experimented with lot of things and wanted to avoid any floating.
And after a trial and error I got it working reasonably well in Chrome (only browser I have on my machine) using relative and absolute positioning,display block and inline-block.
I would like honest critique and opinion so I could learn from it. I’ve been member of CSS Trick for while (when I started to get serious about web,dev) and noticed that there are really lot of top notch experienced and nice people.
Well, after all it wasn’t a good stable layout as I thought. I discover big problem by accident when I re-sized browser with my Chrome extension. The left nav extended out of the body container downwards while content stayed the same height. It looked bad and I couldn’t figure out how to fix that if at all it was fixable the way it was constructed. So I went back to float left nav and float right content and all is good :)