Tricks to Solve 960 CSS Framework Problems
Author: Stefan Vervoort | 3 Comments »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 framework you might have struggled with. This post acted like a problem solver.
Many of these “problems” are very simple to solve. You will need a basic understanding of the framework though to understand why and how things get solved. You should learn the basics here.
Add padding
All the boxes in the framework have a specific width and margin and this creates the grid look and feel. However, sometimes you want to create a “box” or just want to add padding to your div.
As in any framework, this isn’t possible in the regular way. When you add padding to the div, the div will become wider and this will screw up your whole grid layout.
Solution
There is a simple solution to solve this problem. We will add another div inside the div you want to add padding to. We don’t give the new div any width declarations. So, we don’t give it a .grid_xx class.
Now, if we want to style this box and you have added a class or ID, we can add padding. Because we didn’t specific any width declaration, it is automatically 100%. If we add padding, the width of your div will stay the same. Take a look at our example to clear things up.
<div class="container_16"></div>
Let’s say we want to add padding to the div with ID “left”. Usually, like this:
div#left{ padding:10px; }
Loading ...
Loading...