Question

I’ve got multiple independent boxes on my page all using {float:left}. There’s nothing else around for them to interfere with.

When the window is narrow, I’d like the boxes to be {width:100%}. When the window is wide enough for two boxes to fit side by side, I’d like the boxes to be {width:50%}.

How do I go about doing this?

Answer 1

The only substantive answers so far have been using media queries, which I can’t figure out how to get working. Here’s the solution I’ve found:

<div class="columns">
   <div class="box">
      <p>A bunch of stuff in the box.</p>
   </div>
</div>

Then attach to that some CSS:

div.columns {
   column-width: 300px;
}
div.box {
   display: inline-block;
   width: 100%;
}

This isn’t perfect, but it keeps the content at 100% width, no matter how many boxes fit side by side at any given screen size, and it lets me control how narrow a box is allowed to get (using div.columns’ column-width).