CODEWITHSUNDEEP
csshtml
JM4
JM4

Reputation: 6788

Any way to create an "auto" width column structure?

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:

www.site.com

will show all 4 columns. Going to:

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:

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).

Upvotes: 0

Views: 99

Answers (1)

Stephan Bönnemann-Walenta
Stephan Bönnemann-Walenta

Reputation: 3403

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>

Upvotes: 1

Related Questions