Question

I have a 24 column page that is based on the 24 column 960 template. I have an element that needs a specific with of 84px.

I tried to write the markup this way:
<div class="container_24 grid_84">
</div>

I tried writting the css this way:

.container_24 .grid_84  {  
    width:84px !important;  
}  

It is not setting to 84px it is setting to 960px.

What is the proper of displaying this.

Answer 1

Your CSS has this:

.container_24 .grid_84

That is looking for an element with a class of grid_84 that is a CHILD of container_24.

But you are actually looking for this in your HTML:

.container_24.grid_84

That is an element with both classes, which is what your HTML shows.

Side advice:

Don’t mix grid framework syntax with your own. 24 refers to column. Your 84 refers to specific pixels.

I’d suggest using something along the lines of

.override_84px

So it’s clearly not part of the grid framework. Future people that have to look at your markup will thank you.

Also, since you are making your element here, why even use the container_24 class in the first place?

Finally, the !important declaration is usually a method of last resort to over-ride some existing CSS you have no control over of. You typcially do not want to be using that attribute with your own CSS as it’s usually a sign that things have gotten a bit messy.