Responsiveness on Four Columns to Two Columns

Question

I am creating a responsive website with four columns. When the screen gets narrower I would like the four columns to turn into two columns. However when column two is shorter than column one this approach fails, in that column 3 is below 2 and there is a huge gap before seeing column 4 below column 1. Is there a way to not have this huge gap using CSS? I do not want to add an additional HTML element, however if I have to I can.

http://jsfiddle.net/ACJHg/

you can do this by change the margin according to the screen resolution — NullPoiиteя, Sep 23 '12 at 05:09

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Just add clear: left to your third column (using .fourcolumn:nth-child(3)) or to odd columns in general (using .fourcolumn:nth-child(2n+1))

demo

[Also, it would be better to start with the narrow screen and then go to the wider screen (mobile first approach) and use em based media queries instead of px based ones (to prevent layout from breaking when the user zooms)]

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 23 '12 at 05:49

Ana

35,599
6
80
131

Awesome, that's a great little trick! However, I did have to modify it to `.fourcolumn:nth-child(2n+2) { clear: left; }` – michaellindahl Sep 23 '12 at 07:28

Responsiveness on Four Columns to Two Columns

1 Answers1

demo