CODEWITHSUNDEEP
csscss-floatresponsive-design
pau.moreno
pau.moreno

Reputation: 4675

Media queries and 2 column layout: arbitrary positioning

We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.

In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.

The two desired layouts

That's why in the HTML these elements are declared as follows:

<div id="container">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.

The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.

Note: the height of the elements is unknown, and the width is percentual.

EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.

Upvotes: 1

Views: 1472

Answers (3)

Michael Cho
Michael Cho

Reputation: 746

Could you do something like this?

<div id="container">
    <div id="A">A</div>
    <div id="B" class = "left">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>

You can just set float:left in the media query you want and ignore it in the other one.

Edit:

In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie

<div id="container">
    <div id="A" class = "right">A</div>
    <div id="B" >B</div>
    <div id="C" class = "right">C</div>
    <div id="D" class = "right">D</div>
    <div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>

Upvotes: 1

Frank van Wijk
Frank van Wijk

Reputation: 3252

For the normal layout, you should do it like this. Both divs should be left floated.

<div id="container1">
    <div id="left">
        <div id="B">B</div>
        <div id="E">E</div>
    </div>
    <div id="right">
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="D">D</div>
    </div>
</div>

The problem is that the mobile version uses another arrangement. So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).

<div id="container2">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

Upvotes: 0

Christoph
Christoph

Reputation: 51201

You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.

Fiddle

Upvotes: 1

Related Questions