Geek Answers Handbook

Fixed fixed mask for 960.gs

Our site engine uses the 960.gs grid, and I'm trying to change it to 3 columns. Fixed (100px) -Fluid (max to width) -Fixed (100px). Unfortunately, all 960.gs online generators only create fully or fully fixed or full-fluid grids. Therefore, I am trying to modify an initially formed mesh with full fluid for this view:

<------------100%---------------> ======== =============== ======== | fixed| |max to screen| |fixed | ======== =============== ======== <-100px> <-100px>

Code (after modification): http://jsfiddle.net/vZm8x/

  • Problem 1) I'm not sure how to make the central content area maximize on the left of the screen. Because width: auto; doesn't work at all, width: 100% just wrapping divs.
  • Problem 2) after being fixed to 100px, all divs continue to wrap something. (mapping: inline, doesn't help any ideas?)

My question is: is it possible to change the 960.gs template to suit our needs? If yes, please give me any troubleshooting tips? Thank you in advance!

+4
source share
1 answer

With fixed width side columns, this is actually very simple. You will want to use floats, and you may need the faux columns trick depending on your specific design needs.

You need something line by line:

 <div class="left"></div> <div class="right"></div> <div class="middle">Content</div>

and

 div { /* border-box, to make sure "width" is our intended width */ -moz-box-sizing: border-box; /* Firefox still uses prefix */ box-sizing: border-box; } .left { float: left; width: 100px; background: #f00; } .right { float: right; width: 100px; background: #00f; } .middle { width: 100%; padding: 0 100px; background: #ccc; }

See here in action (this is without the effect of an artificial column, but should give you a starting point). If you change the width of the section with the output, you will see that the columns remain included and the content remains within the outer columns.

The content column should be the last because it is still in the document stream, so the right column will be below the content.

Alternatively, you can use position: absolute; on their side columns something like this:

 .wrapper { position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */ } .left { position: absolute; top: 0; left: 0; } .right { position: absolute; top: 0; right: 0; } .middle { padding: 0 100px; } div { -moz-box-sizing: border-box; box-sizing: border-box; }

These tricks will work in IE8 +, Firefox, Chrome, Safari and Opera. IE7 may have problems due to the use of the W3C box model (“content box”) and not CSS box-sizing recognition, but there are a few tricks to make it work if you need it. IE6 should be fine, because the default is to use a field model with a border-box. (You may need to play with z-index to make IE behave. If so, set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)

The position: absolute trick has the advantage over floating in that your sidebars can appear before or after the contents of the div, which makes it potentially more semantic.

The reason they work is because: a) your side columns are fixed, so we just set the filling to the width of these columns and b) position: absolute and float: [left/right] extract elements from the document flow, which means that in relation to the document they are absent and do not take up space. This allows other elements to move to where these elements were used, laying them on top of each other.

+2
source

More articles:


All Articles