The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS laying out a simple header

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #46371

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

    I’ve played around with two different approaches..
    1) Floats:
    2) display: table;

    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?



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


    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.


    Hi Paulie_D,

    That tutorial was useful, thanks.

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



    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.


    [Here’s a pen]( “”) to help you along.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.