Floats, flex box or in-line block

[Ricky55]

Hello everyone

I’ve not built a site from scratch for quite a while, late 2013 actually. I don’t use frameworks I like to roll my own stuff.

I was just wondering what you guys are using for overall page layout as we sit at the mid point of 2015?

Still using floats? ive read that flex box isn’t ideal for overall page layouts due to how content is loaded in.

I know it depends on browser support etc. But on a typical client site I will support down to ie 9. So if that was true for you guys how would you tackle page layout or would it depend on the design?

I’ll be very interested to here your views. I’ve been doing some research but as is always the case with these things you just get a bunch of opinions.

I just always like to ensure I’m using the very best techniques I can before starting out on a project.

Thanks in advance.

Ricky

[Steven]

Every now and then I’ll actually use display: table/table-cell. I sometimes feel dirty doing it, but every now and then it just makes things work for me. Is that taboo? 8(

A while back I looked at an inline framework, but my mind is just too used to working with floats. Admittedly, I pretty much use Foundation whenever I can for a project.

[Ricky55]

Thanks guys. You seem to be thinking on the same lines as me. Always nice to hear what your fellow professionals are doing.

[josh]

I use a grid system based on inline-block and then also use display: table; when I need something a little trickier. Floats remove elements from the natural flow of the document.

I actually wrote about using inline-block over floats and creating my grid system, it might be an interesting read for you:

• Why You Should Use Inline-Block when Positioning Elements
• Creating a Lightweight Grid System

[Ricky55]

Thanks Josh. I’m not too familiar with display table. What does this achieve?

How do you get around the white space issue with in-line block? is that what the display table does?

I’ve heard that you can do a layout with unordered lists and leave the li’s without closing tags. That technique wouldn’t sit well with my OCD nature when it comes to code.

Cheers mate

[josh]

@Ricky55 display: table; allows you to position elements using some of the properties unique to tables. The two most significant are vertical centering and fluid widths.

The most reliable way to eliminate the white space that inline-block introduces is to comment out the space between the elements in your markup. For example:

<div class="col--50"></div><!--
--><div class="col--50"></div>

[Ricky55]

Didn’t know you could do that commenting out.

Have you used in-line block with this for whole layouts?

I suppose browser support won’t be an issue for this either.

Thanks man.

[josh]

@Ricky55 Yeah I do it often, mainly using that grid system I built (linked in my first comment). And you’re spot on, browser support is great.

[Author]

Posts