Welcome to Gaia! ::

I've tried Web design forums, I've tried college instructors, and I've tired looking this up.. and it seems to be a problem of universal annoyance. Essentially, I want a floated layer to expand to fill the side of its containing layer from top to bottom, but the problem seems to be that floats are extrmely stubborn in doing so.

Template:

http://devmedio.com/ryan/

Please note that this page has since changed. If you're really interested, I can put up another model for you to view. I've started on the project, though, so I canned the original idea.

Ignore the image... the stretched face is an inside joke.

The .featurefloat div class is the class in question (the one with the dashed border). That layer should extend to the bottom of its container; it should be flush with the lower "searchdiv" layer. Aligning to 0px bottom and expanding to 100% height seem to fail. Ideas?

Aside: If you have weirdness in a browser, let me know. I've tested in Firefox, Opera, and IE and it works more or less the same... but I'm only one person.

I don't know if this is the case for your site (I am too tired to look through your stylesheet right now), but I had the same problem and figured out why.

If you have something like

and your content text is longer than the overall frame, it will overlap and leave a gap of sorts. What I think happens is that the browser computes what 100% height is before it enters in the content. When the content is finally put into the layout, the length of the frame is already set. confused

If you try un-nesting some layers, it might work out for you. Sorry it is so hard to explain. This is why I don't make tuts or ever tutor. sweatdrop

P.S. It seems to display fine in my Firefox, but I know how that goes. Also! Your site is in my school's colors whee