Question about parent and child

Hi all,

I have been using CSS for a few months now and i thought i had started to get to grips with its quirks, however something baffled me today.

I had a parent div which was set to float images right, and then about 2 children in, i had a div which was set to float the images left, however the images would always float right and not take notice of my child div.

So basically the code was...


parentdiv1 {
border: 1px dashed blue;
}

parentdiv1 img {
float: right;
}

...snip

mycurrentchild {
border: 1px dashed red;
}
mycurrentchild img {
float: left;
}


The above code is an example but i would of thought that since i had overwritten the value of the float then it should of floated my images to the left in the "mycurrentchild" div.

I have fixed the problem by removing the "float: right" in the "parentdiv1 img" but it seems a bit wierd because i may have actually wanted an image floating right in that div and one floating left in my child div. Why has it done this?

Incidentally, whilst the rest of the page is absolutely screwed in IE the float actually worked :p

Please include the test markup as well; if your style rules are as you pasted, they are wrong: they try to select parentdiv1 and currentchild elements, which obviously don't exist. If you used classes instead, the style rules should read ".parentdiv1 ..." and ".currentchild ..." (notice the dot in front).

Please include the test markup as well; if your style rules are as you pasted, they are wrong: they try to select parentdiv1 and currentchild elements, which obviously don't exist. If you used classes instead, the style rules should read ".parentdiv1 ..." and ".currentchild ..." (notice the dot in front).

Sorry missed the # infront of the id names, i was just trying to make an example so it wasnt my exact code. Removing the float right from "#custservice img" worked though.

This is the xhtml...

<div id="custservice">
<div class="contentboxheader">
<h2 class="black">Customer Support &amp; Service</h2>
</div>

<div id="custserviceInnerframe">
<div id="pophelp">
<div class="contentboxheader">
<h2 class="black">Popular Help Sections</h2>
</div>

<div style="padding: 1.0em 0 0 2em;">
<div class="pophelpsections">
<img src="{WEB_TEMPLATE_PATH}/images/customer_services/about.gif" alt="About Nokia-Mobile-Phone-Deals.co.uk" />
<p>About Nokia-Mobile-Phone-Deals.co.uk</p>
</div>
<div class="pophelpsections">
<img src="{WEB_TEMPLATE_PATH}/images/customer_services/contact.gif" alt="Contact Nokia-Mobile-Phone-Deals.co.uk" />
<p>Contact Us</p>
</div>
<div class="pophelpsections">
<img src="{WEB_TEMPLATE_PATH}/images/customer_services/privacy.gif" alt="Your Privacy and Security" />
<p>Privacy and Security</p>
</div>
<div class="pophelpsections">
<img src="{WEB_TEMPLATE_PATH}/images/customer_services/terms.gif" alt="Website terms and conditions" />
<p>Terms and Conditions</p>
</div>
<div class="pophelpsections">
<img src="{WEB_TEMPLATE_PATH}/images/customer_services/order-tracking.gif" alt="Track your order online" />
<p>Order Tracking</p>
</div>
</div>

</div>



and the css...


#custservice {
border: thin solid black;
border-top: none;
margin: 0 0 8px 0;
background: #FFFFFF;
margin-left: 210px;
}
#custservice img {
float: right;
}
#custserviceInnerframe {
margin: auto;
background: #FFF;
overflow: auto;
}

#pophelp {
border: 1px solid #000;
border-top: none;
width: 47%;
margin-top: 1em;
margin-right: 1em;
float: right;
min-height: 24em;
background: #CCCCDD;
}

/* Customer service pages - */
.pophelpsections {
padding-top: 0.5em;
}
.pophelpsections p {
padding-left: 5em;
}
.pophelpsections img {
float: left;
}




Basically it was making the images go diagonally down from left to right.