Grow your CSS skills. Land your dream job.

laying out a simple header

  • # July 13, 2013 at 7:37 am

    So I’m trying to create a fairly simple looking header like this..

    http://dev.golightlyplus.com/csstesting/targetHeader.png

    I’ve played around with two different approaches..
    1) Floats: http://dev.golightlyplus.com/csstesting/layouts.html
    2) display: table; http://dev.golightlyplus.com/csstesting/table-layouts.html

    Which is the best practice? I don’t seem to find either particularly easy to work with to get them just right..

    Also I see there is something new emerging called Flexbox.

    Suggestions? Ideas?

    thanks.

    # July 13, 2013 at 9:07 am

    Floats or dispaly:inline-block; Flexbox, the browser support is not there yet.

    # July 13, 2013 at 9:22 am

    The question I suppose is “what is it that you find hard about them and what is it that you can’t get right”?

    If we know the specific issues we can help you address them.

    Flexbox…yeah, low support and pretty hard to wrap your head around. Certainly more complex than floats.

    In the interim, this might help.

    http://learnlayout.com/

    # July 20, 2013 at 6:30 pm

    Hi Paulie_D,

    That tutorial was useful, thanks.

    So for constructing a header as outlined, would you use floats or inline-block, or position?

    thanks.

    # July 21, 2013 at 3:58 am

    For the header ‘blocks’ I would tend to use floats but I’m moving more and more towards inline-block.

    Alignment is so much easier (vertically and horizontally) with inline-block and centering menu list items is a breeze.

    Yes, there are some issues (whitespace for one) but once you know the workarounds it’s very simple **and** you don’t need to remember a clearfix.

    What I would suggest, is…try it both ways and see which you prefer and find the easiest to handle for this project. Sometimes, floats would be the best way to achieve the design, sometimes, inline-block.

    Quite often, it’s a combination of multiple techniques.

    Certainly all of the currently used ‘layout’ methods are valid in their own way and there is no harm in using any one of them in the right place for the right reason.

    Over-reliance on any single technique or method is where so many (in one person’s opinion) new coders go awry.

    # July 21, 2013 at 9:07 am

    [Here's a pen](http://www.codepen.io/wolfcry911/pen/gitqJ “”) to help you along.

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

You must be logged in to reply to this topic.

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