Grow your CSS skills. Land your dream job.

css layout critique and advice

  • # August 11, 2012 at 10:02 pm

    Hi all,
    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.

    Thanx a bunch.

    Here’s the link to that last layout

    # August 12, 2012 at 7:02 am

    I read somewhere that it is preferable (for SEO) to have content first in html mark up before navigation so I tried it in that layout I presented and to my surprise it works. I guess I got lucky.

    # August 12, 2012 at 12:45 pm

    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 :)

    # August 13, 2012 at 6:04 am

    Hey, the link to the layout currently isn’t working.

    # August 13, 2012 at 6:21 am

    Yeah, I took it out. I was messing around all day practicing with layouts cause I am new at this and it was not good so I went eventually with what’s proven and works.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".