...

View Full Version : Overflow auto doesn't overflow?



johnmerlino
05-22-2010, 05:11 PM
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
05-22-2010, 05:39 PM
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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

johnmerlino
05-22-2010, 06:01 PM
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
05-22-2010, 06:03 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum