counteracting existing styles

Question

I have a div with a padding, created and styled by Javascript. This div is created on a page with the following CSS rule:

div {
    width: 100%;
}

This messes up, as it changes the width of my created div to what it naturally would be PLUS its padding (so I end up with buttons outside of the div borders). I can't statically set div widths because they depend on the content. So how can I overwrite this rule and bring it back to "default width"?

Answer 1

You need the following CSS:

div { width: auto; }

Since the CSS rule is applied through JavaScript, which causes it to be an inline style, you may have to use !important to make sure the new rule has a higher specificity so you can overwrite the old one.

div { width: auto !important; }

Of course, it would be even better if you could just edit the JavaScript so it wouldn’t add the style to the div anymore.