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