June 2, 2015 at 12:21 am #203081
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.
RickyJune 2, 2015 at 9:05 am #203098
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.June 2, 2015 at 9:09 am #203100
Thanks guys. You seem to be thinking on the same lines as me. Always nice to hear what your fellow professionals are doing.June 2, 2015 at 6:27 pm #203120
I use a grid system based on
inline-blockand 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-blockover floats and creating my grid system, it might be an interesting read for you:June 3, 2015 at 2:57 am #203126
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 mateJune 3, 2015 at 3:12 am #203127
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>June 3, 2015 at 4:44 am #203130
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.June 3, 2015 at 4:45 am #203131
You must be logged in to reply to this topic.