Even though this is a common issue, I have yet to find a solution that actually works for me. The centred div in my chrome extension isn't displaying correctly, even though it works perfectly on jsfiddle.
After dynamically appending a div with specific CSS to a webpage using document.body.appendChild, the div doesn't show up as expected. Upon further inspection, I noticed that the website's styles are affecting my div, leading to the display issue.
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 a way to dynamically add a div to any webpage with only my specified styles applied? I specifically want a fixed, dynamic-width centered div appended to the body element.