Question

I have a site that at its top level, has 4 center columns, all of equal width across a 960 grid pixel stage. If a certain query string is added to the URL, the number of columns (including content inside of course) can shrink down to 1 (never less than 1 never greater than 4).

For example:

http://www.site.com

will show all 4 columns. Going to:

http://www.site.com?col=3

will the site but without the fourth column altogether. The idea continues on. What I am struggling with, is, in the presence of a query string (managed by PHP) is it possible to allow the other columns to “auto” correct their width to maintain the entire width of the page.

SO:

• IF 4 columns, all columns are 220px with 10px margin on each side.
• IF 3 columns, all columns are 300px with 10px margin on each side
• IF 2 columns, all columns are 460px with 10px margin on each side
• IF 1 column, it is 940px with 10px margin on each side

I want to achieve this but dynamically and hopefully within one general CSS class if possible.

Update

It seems the consensus answer is to use a liquid based format (which I assumed but since the current project is built was hoping for a possible hack I may have been unaware of).

Answer 1

The flexible box model is the way to go here. See this codepen to see it in action.
If you don’t want to support IE < 10 you can just use it (prefixed).

CSS:

.wrapper {
  display: box; //this property needs prefixes
  width: 960px;
  height: 100px;
  margin: 10px;
  background: red;
}

.box {
  box-flex: 1; //this property needs prefixes
  height: 100px;
  background: green;
  margin: 0 10px;
}

HTML:

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrapper">
  <div class="box"></div>
</div>