Re: Help with overflowing container???

On 2009-07-15, bobm3 (AT) worthless (DOT) info <bobm3 (AT) worthless (DOT) info> wrote:

Gents & Ladies;

I've been trying to overcome a layout situation that is just eluding
me. It's the usual 3 column layout which for most purposes is working
fine. However, if the main column (i.e.: center) is longer than the
viewport it overflows out of that container.

I am trying to determine a method to automatically expand the main
column to enclose the full length of the content AND keep the footer
below that.

I've really scoured the web and usenet and tried many, many
recommendations I've found. None seem to work. I know there's got to
be a way because I've seen other sites that are long and do this.

I've pasted a sample of my css and my generated html so you can see
what I have defined. If you save it on your system you can actually
open it in a browser to see what I mean.

Any ideas or pointers for this frustrating problem will be greatly
appreciated.

Your problem is that <div class="main"> has practically no height
because its contents are mostly inside a float (div.main-center), and
floats do not usually affect the heights of their containers the way
normal contents do (that's just what the rules say and it's what you
want if you're using floats for their intended purpose).

That means in turn that div.container is also unaffected by the height
of main-center. So it's as tall as the viewport (because of min-height:
100%) but no taller.

But you can make a container contain floats by putting overflow: hidden
on it. So just put overflow: hidden on div.main to fix it. See also

http://netweaver.com.au/floatHouse

which also has some IE hacks.

On Thu, 16 Jul 2009 08:55:59 -0500, Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-07-15, bobm3 (AT) worthless (DOT) info <bobm3 (AT) worthless (DOT) info> wrote:
Gents & Ladies;

I've been trying to overcome a layout situation that is just eluding
me. It's the usual 3 column layout which for most purposes is working
fine. However, if the main column (i.e.: center) is longer than the
viewport it overflows out of that container.

I am trying to determine a method to automatically expand the main
column to enclose the full length of the content AND keep the footer
below that.

I've really scoured the web and usenet and tried many, many
recommendations I've found. None seem to work. I know there's got to
be a way because I've seen other sites that are long and do this.

I've pasted a sample of my css and my generated html so you can see
what I have defined. If you save it on your system you can actually
open it in a browser to see what I mean.

Any ideas or pointers for this frustrating problem will be greatly
appreciated.

Your problem is that <div class="main"> has practically no height
because its contents are mostly inside a float (div.main-center), and
floats do not usually affect the heights of their containers the way
normal contents do (that's just what the rules say and it's what you
want if you're using floats for their intended purpose).

That means in turn that div.container is also unaffected by the height
of main-center. So it's as tall as the viewport (because of min-height:
100%) but no taller.

But you can make a container contain floats by putting overflow: hidden
on it. So just put overflow: hidden on div.main to fix it. See also

http://netweaver.com.au/floatHouse

which also has some IE hacks.

Thanks to all who responded. By using some of the examples referenced
I was able to restructure the specific div's and actually get rid of
many of them. Now, the bottom of the container grows as desired with
the length of the content. However, now it also shrinks with small
content but I'll just have to keep it full.

Thanks again - B

In article <sh6v555jj4er1vnvniimt37p11pbjtbq2b (AT) 4ax (DOT) com>,
bobmct <r.mariotti (AT) fdcx (DOT) net> wrote:

Thanks to all who responded. By using some of the examples referenced
I was able to restructure the specific div's and actually get rid of
many of them. Now, the bottom of the container grows as desired with
the length of the content. However, now it also shrinks with small
content but I'll just have to keep it full.

Don't forget that you can sometimes press min-width and min-height into
service sometimes.

--
dorayme