Forums

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
    Posts
  • #46371
    magician11
    Participant

    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.

    #142665
    jurotek
    Participant

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

    #142666
    Paulie_D
    Member

    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/

    #143810
    magician11
    Participant

    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.

    #143832
    Paulie_D
    Member

    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.

    #143892
    wolfcry911
    Participant

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

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