Overflow auto doesn't overflow?

[johnmerlino]

Hey all,

I'm just curious. Overflow auto typically works with p, h1, and other block level elements that occupy space in the normal flow. However, when I try to have it overflow divs (which I know are empty block level elements), I still specify a styling to those divs, speciically a width and height (so now they occupy space), yet the overflow: auto for the container div still doesn't overflow:

	<div id="container">
		<div id="s01"></div>
		<div id="s02"></div>
		<div id="s03"></div>
		<div id="s04"></div>
		<div id="s05"></div>
	        <div id="s06"></div>
		<div id="s07"></div>
		<div id="s08"></div>
	</div>

#container {
	position: relative;
	left: 100px;
	width: 580px;
	border: 1px solid #f00;
	overflow: auto;
}

#s01 {
	position:absolute;
	left:19px;
	top:23px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s02 {
	position:absolute;
	left:138px;
	top:23px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s03 {
	position:absolute;
	left:256px;
	top:23px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s04 {
	position:absolute;
	left:375px;
	top:23px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s05 {
	position:absolute;
	left:493px;
	top:23px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}

#s06 {
	position:absolute;
	left:19px;
	top:114px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s07 {
	position:absolute;
	left:138px;
	top:117px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}
#s08 {
	position:absolute;
	left:256px;
	top:117px;
	width:50px;
	height:50px;
	border: 2px solid #000;
}

I am missing a rule here? Thanks for any response. Also, do you think it is better to dynamically build those divs in javascript on page load?

[Excavator]

Hello johnmerlino,
Your use of absolute positioning removes those divs, s01 thru 08, from the normal flow of the document. That means #container doesn't see anything to enclose.

You will need to give #container a height for this to work.
Read about the pitfalls of absolute positioning here.

[johnmerlino]

The container div is set to position relative so it acts as a reference point to the contained absolutely positioned divs. Is it possible to have it act as a reference point yet also allow it to overflow to enclose its containing absolutely positioned divs as well? If not, is there a workaround, aside from having to give the container a height property? thanks.

[Excavator]

Originally Posted by johnmerlino

Is it possible to have it act as a reference point yet also allow it to overflow to enclose its containing absolutely positioned divs as well?

No. Not without a height.

If not, is there a workaround? thanks.

Don't use ap. Position those elements with floats and margins instead.