Dynamically add div: fixed, dynamic width, centred

Question

I know this is a common issue, but hear me out, because I haven't seen any solutions that have worked.

This centred div works perfectly on jsfiddle, but not with my chrome extension. In my chrome extension I dynamically append a div with this css to the body of a given webpage (using document.body.appendChild), but it doesn't show up. When I inspect further, I can see that the website that I am visiting is applying it's own styles to my div; I'm not sure if this affects things.

http://jsfiddle.net/StEek/

html:

.myDiv{
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
    background-color: red;
}

css:

<div class="myDiv">
    <p>coolio</p>
</div>

Is there any way to dynamically add a div, with ONLY my style applied to it, to ANY webpage? I want a fixed, dynamic width centred div that will be appended to the body element.

Answer 1

You need to give your div an id and set your styles for that id instead of the class element.

If a website set styles for all divs on the webpage, you will need to override these styles with your own.