The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stack sides columns on responsive layout

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #195128

    Hi everybody,

    I’ve got a 3 columns responsive layout that looks like this:
    My problem is that I need one more step for tablets where the right column stack under the left colum, and the content area (green) feet the rest of the page…
    What is the logic here ?

    Thanks for your help


    We can’t really comment on code we haven’t seen.

    Please provide a reduced case example in Codepen.


    Well, the thing is that I dont know the logic to apply in this case so I prefer not to provide any code.

    All sizes are fixed (px), all columns are floating left, columns 1 and 3 are the same size.

    For example:
    Desktop view= container 1200px, side columns 300px, content 600px (300+600+300)
    Tablet view= container 1000px, one side column 300px, content 700px (300+700)


    If you have no code, perhaps check out what some popular frameworks do?

    Both are open source so you can check them out.


    Also, it will depend on what browsers you want to support.

    Flexbox can do this easily enough but support is really only for modern browsers (IE10+ ish)

    Other than that..a CSS framework with as shaneisme suggested would allow you to re-organise layouts in association with media queries.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.