View Full Version : Trying to have css styles indepedent from its parent

08-06-2010, 08:50 PM
for example:

<div id="one">

<div id="two">


I want it so that the container one's position will not affect container two...

08-06-2010, 10:30 PM
Maybe something like this might work out:

<div id="one" style="position: inherit; top:0px; left:0px;">
Div 1

<div id="two" style="position: absolute; top:20px; left: 0px;">
Div 2


08-07-2010, 07:27 AM
If you're trying to override a style that's been inherited you can use something like this:

#two{font-size: 18px !important;}

08-07-2010, 07:33 AM
Why not succumb to change and position your inner-div according to the outer-div?

I mean, you can only want it relative, or absolute really. So why not apply a margin or position accordingly?


<div id="one">
<div id="two">Two</div>


#one { position:absolute; }
#two { position:relative; margin-left:-30px; }

OR... CSS:

#one { position:relative; }
#two { position:absolute; right:40px; }

If you'd explain what you're trying to accomplish, we might better serve you.

08-09-2010, 12:32 PM

Basically I have my school's cms with templates I have no control over. It's a basic webpage with a centered main section.

I'm trying to do a javascript overlay by showing and hiding css, however it doesn't properly center in the template. In ie7 i believe my overlay box is even contained only within the main content area of the template. So really buggy.

It's obvious that the template is affecting my css, but I don't know what is affecting it or what is conflicting.

In this situation what would you do if you had to get around the main template's css? I tried !important on my css but it doesn't do anything.