Columns arrangement in CSS dependent on target-device

Question

I am currently working on a website that has to be fully responsive and accessible on different devices (desktop, mobile etc...). I want to have only one HTML markup and I am working with media queries to achieve different type of layouts.

It's important to me to have a clean markup so let's start. To make things easier I remove all unnecessary stuff. I have a list of articles(-tags). The content of each article is VARIABLE so I can't determine a fixed height. My goal is to arrange these sections based on the device. So for example:

1. On a mobile device there is only 1 column and all sections are below each other.

2. On a tablet I want to have 2 columns, so 2 articles are next to each other (see the images below).

3. On a desktop I want to have 3 columns...

My markup looks like this and is aware of any presentational stuff like columns etc. If I had included columns into the markup (extra markup e.g. with column divs) I would not have any chance to change the layout based on the target device. This means I would have fixed the layout/presentation at "markup-time".

<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>

I am not beginner at all working with CSS: I tried nearly everything the last few days.

So how can I arrange the articles in a typical 2 column layout? I would be very easy if every article is of the same height. 1 Column is also no problem at all. 3 Columns are even harder to implement than 2 columns.

The desired layout for 2 columns is like so:

But I do get this result when working with floats (float: left)

ms-grid and flexbox are no alternatives due to the lack of support in older browsers (that I have to support).

Answer 1

I'm not entirely sure what your asking and how it differs from typical RWD with CSS3 but from what it sounds like. You can use media queries to respond your layout between different screen resolutions. Including various mobile and tablet; portraits and landscape views.

Below is one examples.

@media screen and (max-width: 480px) {
   #leftbox { 
     margin-right: 100px;
    }
}

Take a look at this link for reference; http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Alternatively you could load a new stylesheet with a complete new layout per each resolution.