How do I override widths in 960.css?

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开发者_JAVA技巧 proper of displaying this.

---

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.

---

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

syntax is correct but are you sure you are looking at the right cell? I have not exactly understood your question though.

Also consider using an ID for container_24, if there is going to be only one such container in the page. Make sure you are not setting width of a span element, which does not take width unless you change its display property to block

{display:block}

---

The latter css statement is always used, I know you can set this with the !important tag, however, I am not sure if this only applies to the other statements within the same file. I would suggest using the order:

• reset.css
• 960.css
• text.css
• style.css