pointers to expanding container for long content? 2

[BobMCT]

Gents;

As with most people who post here, I'm having trouble grasping this technique. I have a 3-col box model all contained within a single box. Some of my dynamic pages generate content in the middle box that is way, way longer than the left and right columns and while the content appears, it extends over the bottom of the main box which means that the background image and footer stop midway or earlier in the content.

I would like the height of the center box to grow dynamically with its content and keep its background image growing as it resizes and also to keep my footer at the end.

Here is some of my css:

.container {
width: 970px;
height: 100%;
margin: auto;
background: #fff url(pix/TILE.jpg) top repeat;
border: 1px solid #4c5e2a;
}

.main {
position: relative;
margin: 0 142px 0 142px;
padding: 10px;
}

.main-center {
width: 100%;
top: 62px;
height: 100%;
float: left;
}

/* Common Page Footing Declarations */
.footing {
margin: 0;
border-top: 1px solid #666;
padding-top: 1em;
font-size: x-small;
text-align: center;
width: 100%;
clear: both;
display: block;
}

My output is something like this:

<div class="container">
<div class="main">
<div class="main-center">
all my output
</div>
</div>
</div>
<div class="footer">
footer stuff
</div>

I know this is not much detail to go one, but hopefully someone can point me to some research information to study (I've been researching for a few weeks now and while I have found information, none seem to address my problem) or even have a simple solution for me to try.

Thanks in advance for ANY advice and suggestions received.

B

 

[Vragabond]

Your container is defined as 100% of its parent. Provided that parents also have height defined as 100%, your container will be as large as the viewport (browser window). If your content extends beyond the viewport, it will spill out of the container. That is what you're instructing it.

I would suggest you stick to having heights set to auto (default value), which means they will expand to fit all the children. If you needed footer to be at the bottom of the screen, I would suggest you rethink that idea -- it is really hard to accomplish that and it looks terrible on large screens. If you needed side columns to be as long as the main column, check faux columns for the best method in achieving that.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

If you give .main [tt]overflow:auto[/tt], it should expand to enclose its contents.

There's no need to reinvent the wheel, though.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

has a whole host of layout examples that you can follow to get the effect you're after.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd