I’ve used float layouts for as long as I’ve been designing sites. It’s all I’ve known and I’m starting to feel like some of the old guys when I started who simply wouldn’t let go of table based layouts.
I’d like to start altering my approach to something easier and more logical than immediately jumping to float everything on the page.
Pretty simple right now (that’s why I didn’t codepen it). It’s nothing more than a main container and sidebar container both floated left, then each image inside of “main” also floated left.
So what’s the way forward here? Using display: table? flexbox?
Let’s assume I used display table or flexbox to layout the two main columns. What’s the best approach for then laying out each image in the gallery rather than floating each left?
There are a few alternatives to floats for that sort of “card” layout. In-line Blocks, CSS tables, Flex-box and the new kid in town “Grid”.
In-line block and css tables have been around for a while, so have very robust browser support. Flex-box is well supported too now, albeit with some awkward glitches in IE to consider.
Now grid is growing with support also with the major browsers supporting it, and the usual suspects having difficulties.
Probably the simplest, and most similar to float would be the in-line blocks. It’s a simple, well supported, no-thrills way to get the same sort of effect. The bonus it has over floats being you don’t have to worry about clearing and all that caffuffle with containment.
The css tables are good for page layout, but I would probably avoid for card layouts like this. Floats, in-lines, flex-boxes all have the ability to wrap and flow to new lines as width runs out. But tables are constrained to grouping elements in rows, so responsiveness can be more tricky.
As for grid, I’m still learning that, would probably leave it to mature a bit longer. I think it’s more for whole page layouts, rather than the smaller fiddlier elements that flex-box would handle.
Myself, I have used both in-line blocks and flexbox for card layouts, depending on the specific needs (flex is more flexible). With flex-box you can always add in in-line blocks as a fall-back if you are still concerned about support.
Thanks. I’m tired of clearing things and all the extra markup. If there’s an easier way to get the same result I figure there’s no better time to start.
Thanks. Your first example does the trick, but I don’t think I can use it considering you’ve got every fourth image wrapped in a row tag. Might make it tricky when feeding content dynamically. Not sure though I’ll have to see.
I did see the css grid stuff a while back but also saw that it wasn’t fully supported so I kind of ignorned it.
Thanks. Those make sense. If I went with inline-block, the idea would simply be to lay out the two columns (from my example) with css tables and then inside the main table cell (where the images are) I’d simply use display: inline-block rather than float left, correct?
I’ve been messing around with flexbox for some things, but it seemed like IE11 support is still lacking? Or am I misunderstanding that?
What’s the process for using flexbox for a layout like this and then using inline-block to fall back on?
Yeah, css grid seems awesome. Can’t wait until it’s more supported.
Yes, this is a simple solution, as it will behave quite similar to float, but without any problems with clearing.
IE11 does support it, but not very well, it’s buggy. It would actually be easier if it didn’t support it at all. I’ve used flex-box before where I had in-line block fall backs that worked OK in IE 8 & 9 in a no-thrills but elegant enough kind of way, but then IE11 tries to support it and gets it wrong, which then leads to workarounds.
In it’s simplest form, giving the property display: inline-block to the flex items. That has no affect on them where flex is supported, but where it’s not, they take on that behaviour instead. You just need to test in an old browser, or with flex commented out to check the results.
Thanks. Yeah, that’s really what I’m after is removing the extra markup required to make floated layouts like this work, e.g., negative margins, clearing, etc. But, that said, after playing around with it a bit, I’m not even sure I can use display table in combination with inline-block for the items. The problem will arise when the browser is scaled down and I want to say bump the sidebar content down below the gallery images. It seems from searching that when you’re using display table, that you cannot make one column (in this case the sidebar) drop down below another column.
So in that case, I may just have to take a look at flexbox and either not worry about IE’s lack of support (I’m not worried about older browsers really) or just try to use the backup method you suggested. Since I’m not doing anything ground breaking with this layout, my hope would be if I used flexbox that IE would render it correctly, but I’d have to test it.
It should not be a problem. You can use a media query to revert from table to default block behaviour. Or vice-versa in a mobile first approach.
The difficulties come with the tables when you use them on the card layout as I mentioned. If you have say four cards in a row, you are stuck with that structure, you can’t then go to 3 per row, then two, whereas the free-flowing in-line styles wrap automatically without the need for media queries.
The table is fine for the main | sidebar type layout, as it’s just one row of a given number of elements (2).
Ah, true. I was thinking of the footer section of this site when I mentioned that, not the gallery area. The footer of this site is one row with four columns. As the browser is resized smaller, I’d likely want the right most column to drop below the left three and then adjust widths and margins accordingly. As it’s sized smaller than that, I’d drop the right most column below the left two, etc., Given this section is four columns, if it’s sized down below 1100px in width or so, the columns become too narrow and just don’t look good but it’s still wide enough of a width that I wouldn’t want to display the columns in block style with 100% width as I don’t think that’d look good either. Hope that made sense.
hmmm I’m not sure I understand this part. Here’s a quick and dirty example of what I threw together with a css table layout with display inline-block style on each “card” or image. As you size the the browser down, it doesn’t automatically go from three cards in a row to two, but I’ve added media queries to control that with the percentages. Maybe that’s not the best way to go about this so that’s it’s responsive? If I were to eliminate the css table layout would the inline-block cards wrap automatically without the need for the media queries?
The reason your block are not wrapping is the percentage width, that makes them shrink to fit instead. I assumed a fixed width, as in this simplified example I knocked up last night, but did not get around to posting.
It uses the table for the main/sidebar layout which reverts back to block on small screen.
