CSS to dynamically create columns

Question

I have three <div> elements:

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>

Desired behavior

I'd like to write some CSS to create the following effect as the screen size changes:

Undesired behavior

I know how to implement the following (undesired) behavior:

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

Is there a simple way (pref. without any Javascript library) to achieve my desired behavior that will work on major browsers (Chrome, Safari, Firefox, IE9+)?

Answer 1

I don't think this is possible without an extra wrapper div and a media query.

HTML:

<div class="box-wrap">
  <div class="box">a</div>
  <div class="box">b</div>
</div>
<div class="box">c</div>

CSS:

.box {
  border: 1px solid #000;
  float: left;
  height: 300px;
  width: 300px;
}

.box-wrap {
  float: left;
  width: 300px;
}

@media (min-width: 900px) {
  .box-wrap {
    width: auto;
  }
}

Demo: http://codepen.io/sdsanders/pen/zLFJj

Answer 2

Wrap the A and B into it's own container.

<div class="foo-wrap">
    <div class="foo">A</div>
    <div class="foo">B</div>
</div>
<div class="foo">C</div>

Then use a media query to control the display of the A/B column on smaller screens:

.foo-wrap {
    display: inline-block;
}

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

@media all and (max-width: 925px) {
    .foo-wrap {
        width: 300px;
    }
}

Demo: http://jsfiddle.net/axertion/j48da85n/1/