A responsive 2 row fluid layout with mobile view

A 2 (or multiple) row responsive fluid layout, one row has fixed width, all rows have same height, a margin is between rows.
It collapses in mobile resolutions.

The code is minimal, no freaky negative margins or paddings. Everybody should be able to use it.

DEMO:

Fluid width row

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.
(Text by http://slipsum.com)

Fixed width row

Change browser width to see it respond.

First, we define an outer container “fluidcontainer”, and inside a left and a right container, with a 3rd container that serves as margin between:

Code:

<div class="fluidcontainer">
    <div class="fluid-div fluidcolumn">
        Fluid width row<br />
        2<br />
        3<br />
        4<br />
        5<br />
    </div>
    <div class="margin"></div>
    <div class="fixed-div fluidcolumn">
        Fixed width row<br />
        2<br />
        3<br />
    </div>
</div>

The magic happens with CSS. We define the outer fluidcontainer as display: table; and the inner divs as display: table-cell;
This way all the inner divs stretch to the height of the outer div.

And thats the reason we used a 3rd div for margin instead of just setting margin-right: 10px;, because table-cells cant use margin.

Mobile layout is easy, we just take away the table / table-cell display property and give every inner div 100% width. Our margin-div now serves as vertical margin, thats why it had width and height set as 10px in his CSS;-)
For the media-query you probably should use em-dimension rather than pixels, but thats up to you. To avoid some …things that could happen while testing in different environments I usually use px here in my demos.

.fluidcontainer {
  width: 100%;
  display: table;
}
.fluid-div {
  display: table-cell;
  width: auto;
  background-color: green;
}
.margin {
  display: table-cell;
  width: 10px;
  height: 10px;
  background-color: yellow;
}
.fixed-div {
  display: table-cell;
  width: 290px;
  background-color: blue;
}

/* now for the mobile part */
@media only screen and (max-width: 640px) {
 .fluidcontainer, .fluidcontainer > div {
  float: left;
  display: block;
  width: 100%;
 }
}

See for yourself:
http://pascha.org/snippets/2-row-fluid.php

Leave a Reply

Your email address will not be published.