Skip to main content

Forums

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 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

    #203097
    Senff
    Participant

    This reply has been reported for inappropriate content.

    Still using floats in general, with Flexbox creeping in here and there, but only when floats aren’t sufficient for what I’m trying to achieve.

    #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 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star