DIV sizing issue

[Denno]

I've got a problem when it comes to my content wrapper DIV not expanding to the right size vertically.

To better understand that, here is how I'm using it:

I have a contentWrapper DIV, which is relatively positioned, then I have more DIV's inside that which is all absolutely positioned. This is the reason for using a contentWrapper, so that I can easily position elements. The only problem is, the contentWrapper DIV's height doesn't go down below the actual content. I don't want to give the contentWrapper a height, as this should be dynamic depending on the amount of text inside a subsequent DIV.

I have used some z-index properties for the DIV's that are inside of the contentWrapper, so I'm not sure if that would cause a problem?

I'm working on uploading a screenshot, but if anyone can understand what I mean from above and can help, please do.

Thanks
Denno

 

[Denno]

Ok so I got a screenshot for everyone.
What you will see is 3 coloured borders. The green is for the header, and has nothing to do with my problem. The blue borders are DIV's that are inside of the red border. However the red border appears as just a line. I need this to appear as an actual box around the blue borders. I want to be able to position some of the blue boxes in regard to the 'bottom' of the parent DIV, but that won't work if the parent DIV isn't displaying as the right size.

To make it easier to read, the DIV's that are inside of the contentWrapper DIV are:

• menu
• content
• logo
• bowler

Here is my CSS too:

.wrapper {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #666;
}
#wrapper #topGradient {
	background-repeat: repeat-x;
	height: 230px;
	position: relative;
	top: 0px;
}
#wrapper #bottomGradient {
	background-repeat: repeat-x;
	height: 230px;
	z-index: 0;
	position: relative;
	clear: both;
	bottom: 0px;
}
.content {
	width: 650px;
	border: medium dashed #00F;
	position: absolute;
	left: 137px;
	top: 5px;
	z-index: 1;
	text-align: left;
	padding-left: 55px;
	height: 400px;
	padding-top: 20px;
	padding-right: 55px;
}
.grass {
	vertical-align: bottom;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 200px;
	width: 970px;
}

.logo {
	position: absolute;
	height: 106px;
	width: 106px;
	background-repeat: no-repeat;
	left: 58px;
	top: 355px;
	z-index: 3;
	border: medium dashed #00F;
}
.bowler {
	background-repeat: no-repeat;
	height: 161px;
	width: 152px;
	z-index: 3;
	left: 780px;
	position: absolute;
	top: 300px;
	border: medium dashed #00F;
}
.owl {
	height: 94px;
	width: 123px;
	position: absolute;
	left: 776px;
	top: 5px;
	z-index: 3;
	border: thin dashed #00F;
}
.header {
	height: 203px;
	width: 970px;
	background-repeat: no-repeat;
	position: relative;
	border: medium dashed #090;
}
.menu {
	width: 136px;
	background-color: #F2D653;
	position: absolute;
	left: 42px;
	top: 50px;
	z-index: 2;
	border: medium dashed #00F;
}
.floatRightImage {
	margin-top: -20px;
	margin-left: 5px;
	float: right;
	margin-right: -55px;
}

#wrapper #contentWrapper {
	position: relative;
	top: -225px;
	margin-bottom: 127px;
	border: medium dashed #F00;
}
a:link {
	width: 136px;
	border: 1px solid #000;
	background-color: #F2D653;
	color: #000;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
	display: block;
	margin-top: -1px;
}
a:visited {
	width: 136px;
	border: 1px solid #000;
	background-color: #F2D653;
	color: #000;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
	display: block;
	margin-top: -1px;
}
.sponsor {
	height: 47px;
	width: 150px;
	position: absolute;
	left: 42px;
	bottom: 10px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: medium dashed #090;
}

Hopefully that makes it easier for everyone to understand my problem.

Thanks
Denno

P.S. Don't worry about the menu being so small too, this is dynamically filled from a database, which I've blocked for the purpose of illustrating my problem.

 

[smoovo]

Your last div should get "position:relative;" to affect your wrapper. This will stretch it to the bottom.

- Enjoy.

 

[Denno]

Thanks for the reply. Is there another way that I could do it?
I made them all absolute so that I could get them in the exact spot that I want them, and for the last DIV, I actually want it to be 'absolutely positioned' in regards to the bottom of the parent DIV.

Although I guess I'd get the same result if I made it relatively positioned in regard to the bottom of the DIV right?

This is my first time playing with positioning

 

[Denno]

actually, does making it relative then position it in regard to the DIV before it? In my case, it will be the bottom left blue square...

 

[PixelPusher]

Denno, try using "overflow:hidden;" on your wrapper.

 

[Denno]

thanks for the reply PixelPusher.

Putting your code into the contentWrapper CSS hid everything within that DIV. So no content was shown...

 

[smoovo]

Position relative has the same behave as absolute, it will be positioned as you styled it, just change the last one to relative. I don't think it's hard to do... Try it, you won't get hurt!

Denno, try using "overflow:hidden;" on your wrapper.

Not everything gets done with it. In this case the only way to force relative div to stretch to positioned div it's to make it relative.

- Enjoy.

 

[Denno]

Alright, so I'll make it relative in regard to the previous DIV correct?

Thanks

 

[smoovo]

The last div will act the same as absolute positioned div, and will be positioned regards to it's parent div - the "wrapper". All the other divs can stay "absolute" positioned.

If you were using floating divs it was a different story, you could just use PixelPusher's advice or add clear floating div at the end, but here you have positioned divs, so this is your best choice if not the only one.

 

[Denno]

ok thanks, I'll give it a go in a minute and post back with a result.

Thanks for the help .