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:

enter image description here

Undesired behavior

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

enter image description here

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+)?

Hmm... so you want a vertical layout on smaller screens and a horizontal layout on wider screens? Are there an arbitrary amount of divs? If not, you could do some manual placement with media queries and CSS transforms. — Jason
– Jason, Commented Aug 7, 2014 at 19:53
Ooo, what about CSS columns? I don't think it would work on <IE10, but perhaps that could get a nice effect. — Jason
– Jason, Commented Aug 7, 2014 at 19:56
Just those three divs. Yes, I was thinking media queries. Do I need to surround A and B with a <div> do you think so I can control their combined layout? — ᴇʟᴇvᴀтᴇ
– ᴇʟᴇvᴀтᴇ, Commented Aug 7, 2014 at 19:57
Well CSS columns would be the "cleanest" way to do it, but seeing as you want as much support as possible, placing A and B in a parent div would be the best bet. Keep in mind, though, that media queries are not supported by <IE9, so you would indeed require some JavaScript to achieve the same effect in IE8 (perhaps using Modernizr). — Jason
– Jason, Commented Aug 7, 2014 at 20:00
All depends on what your definitions of Medium and Small are, here's a super barebones version codepen.io/evanrbriggs/pen/cpwoj with media queries. — ebriggs
– ebriggs, Commented Aug 7, 2014 at 20:10

Steve Sanders · Accepted Answer · 2014-08-07 20:02:07Z

2

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

answered Aug 7, 2014 at 20:02

Steve Sanders

8,6812 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ᴇʟᴇvᴀтᴇ Over a year ago

Thanks! Actually because of the border you put on the boxes if you hover +/- a pixel or two around the 900px mark the top row shows AB instead of AC. Is there a way to make that require less exactness? E.g. could we use max-width instead?

Axel · Accepted Answer · 2014-08-07 20:04:41Z

1

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/

answered Aug 7, 2014 at 20:04

Axel

10.8k2 gold badges32 silver badges43 bronze badges

2 Comments

ᴇʟᴇvᴀтᴇ Over a year ago

Thank you! That's just what I was after.

Axel Over a year ago

By the way, I used max-width: 925px on the max-width to account for the additional space between the blocks. Since you are using display: inline-block;, there will be some additional space between the blocks.

Collectives™ on Stack Overflow

CSS to dynamically create columns

Desired behavior

Undesired behavior

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Desired behavior

Undesired behavior

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related