Home/ Questions/Q 8570691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T18:36:56+00:00

I am creating a responsive website with four columns. When the screen gets narrower

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)]

    • 0