DivitoDesign

Everything for the Web Professional

Tricks to Solve 960 CSS Framework Problems

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

16 Comments

  1. Nice to see a tip on using my favorite CSS grid framework. I’ve seen this trick used by WooThemes and using padding on a div inside a grid will do the trick. Thank you for this post

  2. If a framework requires you to write dodgy HTML to use paddings, I’d say that framework is poorly designed.

  3. I agree with Simon. The idea of a framework is sound but so far I have yet to see a truly useful and usable execution. I think 960 encourages the use of bad HTML practices. I also think working inside a framework like this has a tendency to inform some design decisions, making the design more likely to ‘fit’ inside the framework.

  4. I love 960. These tips were really, really helpful, especially since I’ve had IE problems because of borders in the past. Thanks for the article!

  5. Well, first of all: If you are new to webdesign: don’t use frameworks! but learn it on your own. If you finally got to know the stuff, you can reason on frameworks and you know how to deal with them.
    I like to use 960 Framework because it provides the photoshop templates – and it’s really easy to use.

    But yeah, you’re right: The padding thing is a bit tricky: It would be great if there was an optional CSS class “setpadding” which makes the padding for the container.

  6. [...] Tricks to Solve 960 CSS Framework Problems » DivitoDesign [...]

  7. Don’t worry, nicole, frameworks are a recent development in my web design history. I knew how to *fix* the problem, just acknowledging that this solution will help when I need to apply borders rather than changing the css structure of the grid css itself.

    I also love the psd files. I was blown away at the speed I was able to transition psd to xhtml with this system.

  8. whiskey says:

    If everything else fails (like it tends to do on IE6 for example) add a class to your grid_X like this:

    div class=”grid_7 oopsIE”
    ( you put your own > and < )

    now you go to your css and add to it the width of the grid_x on your container (it varies if you decided to use 12 or 16 so take a look first):

    .oopsIE{
    width: 400px;
    overflow: hidden;
    }

    This is because sometimes IE behaves like a jerk +1.

    It worked for me at least!

  9. [...] include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this [...]

  10. Actually, if you wanted a narrower layout, but still wanted the overall container width at 960px, then you could use a div with prefix_XX and suffix_XX, to create empty space on the left / right. :)

  11. erdosam says:

    Is there any soltions for 960 fluid layout in IE?
    I try the compatibility view, the layout doesn’t work! :(

    http://www.spry-soft.com/grids/fluid_grid/?column_amount=12

  12. [...] Tricks to Solve 960 CSS Framework Problems « DivitoDesignJan 4, 2009 … A couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 … [...]

  13. J305 says:

    I kinda agree with Simon. I think 960 is nice but solving a problem by introducing non-semantic divs into your HTML isn’t really a great solution.

    I liked 960 enough to use it despite the challenge, but I tend to favor manually overriding the width for the containers that have padding or borders.

    It takes more work on the front end but the resulting markup is much cleaner.

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!