- This topic is empty.
July 13, 2013 at 7:37 am #46371magician11Participant
So I’m trying to create a fairly simple looking header like this..
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.
thanks.July 13, 2013 at 9:07 am #142665jurotekParticipant
Floats or dispaly:inline-block; Flexbox, the browser support is not there yet.July 13, 2013 at 9:22 am #142666Paulie_DMember
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.July 20, 2013 at 6:30 pm #143810magician11Participant
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 #143832Paulie_DMember
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 #143892
- The forum ‘CSS’ is closed to new topics and replies.