[SOLVED] Child div not applying parent div border.

[UndunDesign]

Greetings fellow CSS lovers:

I recently began using HTML and CSS and am learning quite fast, however, as I run into problems frequently I have applied to this board in the hopes of finding assistance from veteran users (and increasing my own knowledge). I have begun work on a new page and have run into an issue that I hope you can help me with.

The Problem:
I have created a wrapper div to contain my liquid layout and have added a footer div inside the wrapper. This part of the code works just fine and the page displays the footer div inside the wrapper with one small hitch:

The border from the wrapper (parent div) does not extend to the bottom of the footer (child div).

What I've Tried:
I have attempted to fix this issue by setting a width and height to the footer, and by making the border for the footer inherit from the wrapper. Neither of these yielded any change. I have also tried positioning the footer to absolute, but that of course removed the footer from it's position inside the wrapper visually.

I am using Google Chrome to test my page currently, though I have access to all major browsers (of course).

My CSS:

/*Global Settings
===========================================================*/
body{
	background-image:url('../img/bg.gif');
	background-color:#999;
	background-repeat:repeat;
}

/*Wrapper Settings
===========================================================*/
#wrapper{
	margin:0px auto;
	padding:0px;
	width:960px;
	height:640px;
	background-image:url('../img/banner.jpg');
	background-color:#FFF;
	background-repeat:no-repeat;
	border:1px solid #000;
}

/*Content Settings
==========================================================*/
#content{
	margin:42px 18px 24px 18px;
	width:924px;
	height:480px;
	background-color:inherit;
	border:inherit;
	opacity:0.7;
}

/*Footer Settings
=========================================================*/
#footer{
	width:960px;
	height:83px;
	background-image:url('../img/footer.jpg');
	background-color:#cfcfcf;
	background-repeat:no-repeat;
	position:absolute;
	bottom:0px;
}

My HTML is pretty generic at this point and I didn't feel it was needed to help fix this problem, if I'm incorrect in this assumption, I'm happy to post it. I also appreciate any feedback on my CSS as a whole (I am unaware of using any bad practices and am always happy of improving my habits).

It may be worthy of note that I normally wouldn't use background images like this, but for the current template I'm working on, I didn't see any other option as I wanted to display text over the images without abusing the z-axis.

Thanks in advance for any help.

[chrishirst]

The border from the wrapper (parent div) does not extend to the bottom of the footer (child div).

Clear your floats.

[chrishirst]

I didn't see any other option as I wanted to display text over the images without abusing the z-axis

That would NOT be "abusing" the stacking order. It is after all what it is meant for!

[UndunDesign]

Alright, so I've managed to get this fixed. As it turns out, the problem was not with my CSS so much as it was with my HTML. The problem was not with my floats, it was with the height of my wrapper. I removed the height of the wrapper and allowed it to stretch to fit content (this was originally set to help me see things better during development).

All in all, the problem was solved, I appreciate all effort by those of you who posted. (I'll remember about the z-axis in the future).