Skip to main content

Forums

Home Forums Other Floats, flex box or in-line block

This topic contains 8 replies, has 4 voices, and was last updated by  josh 4 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #203081

    Ricky55
    Participant

    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

    #203098

    Steven
    Participant

    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.

    #203100

    Ricky55
    Participant

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

    #203120

    josh
    Participant

    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:

    #203126

    Ricky55
    Participant

    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

    #203127

    josh
    Participant

    @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>
    
    #203130

    Ricky55
    Participant

    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.

    #203131

    josh
    Participant

    @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.

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star