Forcing a main div to stretch to the content size

[bradyj]

I cannot seem to get this main div to stretch to the content of my little images:
http://www.dotfive.com/faux/

Any ideas why? Is it the absolute positioned div? What can I do as a work around... other than making the div height: 150%; or so...

Side issue, does the alpha png work for you IE PC guys? Such as suggested here:
http://www.codingforums.com/showthread.php?t=37991&page=1&pp=10

[mindlessLemming]

Weird, neither can I :(
Even without any absolute positioning it still doesn't play friendly...
Personally I'd probably float the column right and put a clearing div in the bottom of the main div.
<div style="clear:right; height:1px; margin-bottom:-1px;">&nbsp;</div>
But that's a pretty nasty workaround and shouldn't be necessarry :confused:

P.S. - Bad news: .png's aren't working in IE6. :eek:

[bradyj]

png's working now? I need my testing pc back:(

Yeah, I have no idea why that doesn't work, it's putting me in a bad mood. Any other ideas?

I don't want to have to force that page to 120% or something -- I tried 'auto' as a height, and that actually came up shorter than those list items are in there. Weird.

[mindlessLemming]

Still no luck on the png front, I'm afraid.
You can also use Dan Vine's ieCapture for checking that while you don't have a pc.
I can't think of any reason why that column is behaving like it is...
just when you think you've got half a clue about this css nonsense...

[me']

You've set 'height: 100%' on the main div, which makes it stretch 100% of the viewport, and never any more. If the content stretches over the height of one viewport's worth, it will overflow. Try this instead:div.main { height: 100%; voice-family: "\"}/*\""; height: auto; min-height: 100% }
/* */The hack's there for IE: it recognises height as min-height, but doesn't recognise min-height itself.

[bradyj]

Still didn't work for the main container -- I would've thought a simple auto height would have done it... oh well, I think I'm stuck with doing a 120% or more instead of the hack.

As for the png, I think I'm stuck with a list apart's javascript hack or I am going to serve up a new site for IE users without the shadows. This one really pisses me off -- why no PNG's!! Why!!!

[me']

why no PNG's!! Why!!!Well, actually IE supports the PNG format, just not 24-bit transparency on said images.

[bradyj]

Well, actually IE supports the PNG format, just not 24-bit transparency on said images.

Yeah, that's what I meant... what a beautiful feature to lack -- I don't understand why -- Acrobat, InDesign, Illustrator, Photoshop, postscript technology -- all the printing apps and coding supports it... I would have thought the monitors would have come first, it's easier to impliment.

[bradyj]

Alright, revisiting the main issue -- I have no idea why I cannot get my two nested divs to stretch the full height of their content:
http://www.fauxfilled.com

Why does the shadow div and the nested main div not stretch to the height of the div to the right with the listed images? AAHAHA! :confused:

[spenoir]

Try using position: relative;

:)

[bradyj]

Try using position: relative;

:)

Hmmm, can I center those div's then? I have two nested divs, one shadow and one the main content... Thanks for all your guys' help :D