CODEWITHSUNDEEP
htmlcss
medina
medina

Reputation: 776

Child div to be placed over the top of parent div with image

I am trying to place a child div over the top of its parent div (including its content)

<div id="footer">
  <div id="footer-container">
    <div id="icon"></div>                    
  </div>    
</div>​

#footer {
    height:50px;
    border-top:3px #666 solid;
    margin-top:50px;
}

#footer-container {
    height: 30px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;   
}

#icon {
    height:30px;
    width:30px;
    background-color:#666;

}​

Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better http://jsfiddle.net/4QxL7/

EDIT Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.

Thanks for your help

Upvotes: 0

Views: 252

Answers (2)

medina
medina

Reputation: 776

Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.

Thanks for your help

Upvotes: 0

Mark Adams
Mark Adams

Reputation: 184

I just tried two methods and they both worked using an oversized image from my site...

<div id="footer">
        <div id="footer-container">
            <div id="icon"><img src="image url here" width=30 height=30/></div>                    
        </div>    
    </div>​

http://jsfiddle.net/ZkxSM/

and 

#icon {
    height:30px;
    width:30px;
    background-color:#666; /*unnecessary now probably...*/
    background:url('image url here');
}​

http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)

There's nothing actually wrong with your jsfiddle..

Upvotes: 1

Related Questions