Is it possible to update the CSS of divs that are injected into files but do not exist in the main HTML file?
In my main HTML file, I have:
<div id="container">
<div id="page">
<!placeholder>
</div></div>
I am having trouble with formatting due to the limitations of the code input system on this site.
Here is a snippet from my main.css file:
#container {
position: fixed;
margin-right: 0px;
overflow-x: hidden;
overflow-y: scroll;}
#page {
position: absolute;
width: 100%;
height: 1600px;
z-index: 10;
border-left: 1px solid #CCCCCC;}
#recposts {
position: absolute;
left:0;
top:1200px;}
.child {
height: 400px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
z-index: 11;
background-color: #EDEDED;
width: 100%;
padding-right: 10px;}
And here is what I'm injecting:
<div id ="page">
<div id="recposts" class="child">
<h1> Recent Posts </h1>
</div></div>
I need to change the position top of #recposts and the height of .child.
After some troubleshooting, I realized I needed to edit the CSS on HTML load. By putting the function into the .load() method, I was able to resolve the issue.