RWD – Uneven Panels / rows

[iknowdavehouse]

I’ve been fairly lucky with the couple of RWD projects I’ve been involved in – the main responsive panels have been either of equal height or didn’t include more than one row of panels at a time.

I’m currently working on a personal site and I have slightly uneven height panels. As you can expect as they’re all floated so when the height is uneven a panel will jump up into the gap.

Now, obviously I can wrap these in rows to solve this but I was hoping to not have to set a row as the panels in question go from 25% to 33% to 50% to 100%. The point there is the 33%. A row of 4 would leave one left over with a big gap before another row starts?

Any suggestions on how to deal with this?

[Paulie_D]

Media queries would seem to solve most of this issue.

An equal height script would seem to resolve anything left over.

[ChrisP]

@iknowdavehouse, ditch the floats and switch to `display: inline-block`. You’ll either have to add HTML comments between the divs, or adjust the font size of the parent element to 0, then reset the fonts within each div.

Codepen example: http://codepen.io/seraphzz/pen/ynvFz

[iknowdavehouse]

@Paulie_D the media queries I have set up work really well. It’s purely the odd heights I need to tackle. I’ll search for that script as an option, thanks. As I’ve said before I have a very poor understanding of js.

@ChrisP Thanks for the pen. I’m certainly gonna have a play with this… I don’t know why I feel slightly uneasy about this method but it certainly solves the problem in a way I hadn’t though of. Do you use inline-block for RWD in general or just when you know this is going to be a problem?

[Paulie_D]

I guess the question is do the ‘panels’ need to be the same height?

If not then an ‘inline-block’ solution would probably be optimal as they can be centered both vertically and horizontally.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

[ChrisP]

@iknowdavehouse, recently, I’ve been treating floats like positioning. I only use them when _absolutely_ necessary. Inline-block is such a powerful alternative if used properly.

[iknowdavehouse]

Thanks very much guys. Will certainly take it on board – I work with a group of designers and we try and approach things the same way so that we can all get more involved in each others work. I know it’s hard to have a “global process” for anything but I’ll certainly bring this to the table.

[CrocoDillon]

Agree with @ChrisP about inline-blocks, even so much I made a website for a layout technique using inline-blocks :)

> I don’t know why I feel slightly uneasy about this method but it certainly solves the problem in a way I hadn’t though of.

I’ve been using inline-blocks for layout [here](http://crocodillon.com) and [here](http://justifygrid.com) without any problems (tested IE7+ but if I could test IE6 it would probably be fine even there). The latter is the website I was referring to but that technique only works if you have gutter between columns.

About the huge gap when using 4x 33%, I suggest putting them on 2 lines, 2 smaller gaps looks better than 1 huge gap.

[iknowdavehouse]

Thanks, just run a little test using this method and it works really well.

I find the white space thing quite annoying though!

[wolfcry911]

using the floats you could simply add a nth-of-type and a clear: left; statement to your media queries.

ie, when 25% use div:nth-of-type(4n+1) {clear: left;}

when 33% use div:nth-of-type(3n+1) {clear: left;}

50% use div:nth-of-type(2n+1) {clear: left;}

at 100% you wouldn’t need anything.

in the example change the div to whatever element you’re using for the panels

[iknowdavehouse]

@wolfcry911 Thanks, I’ve certainly never used nth-of-type in that way, I didn’t even know you could use maths. I’ll certainly experiment with this too.

I’ve changed over to inline-block on the current site i’m working on and I can’t find a reason not to use it… apart from the frustrating white space issue! I don’t really want to re-set the font and I worry commenting between the div’s is asking for trouble when it comes to handing HTML templates over. In this instance it’s just for me so i don’t care!

[CrocoDillon]

If you want the columns to sit tight to each other (instead of having gutter between them), you can use negative letter spacing on the parent (Stack Layout is using this) or negative margin. Font size 0 apparently has some issues anyway in Android.

See: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

[Author]

Posts