Topic: "Need some CSS help (Fluid Vertical Table w/o table)" (page 1 of 1)

Need some CSS help (Fluid Vertical Table w/o table)

i've been stuck on a problem that sounds simple enough but is driving me up the wall. consider the following code:

<html>
    <body>
        <div class="Container">
            <div class="header">content</div>
            <div class="collapsibleContent">content</div>
            <div class="footer">content</div>
        </div>
    <body>
</html>

what i'm trying to acheive is a block of random width/height, a fixed top and bottom and a middle that (should it get too long) scrolls. now if i were to use a table element for this it would be easy enough (height:100%, tr1 & tr3 fixed height) and even horizontally you could use the float for header & footer. all of the examples i can find on the web uses the entire page as a header>content>footer layout, and though i can also use javascript to physically get the height and width of the dynamic Container div, i'd rather not resort to that. so effectively

collapsibleContent.height = container.height - (header.height + footer.height)

and then it should scroll if it gets too big (overflow:auto).

so my question is this: can anyone help me out with a pure CSS solution to the problem that works (on our very special friend) IE7+ as well? really, i'm at the end of my tether...

03.07.2012 22:55:51

private message

Topic: "Need some CSS help (Fluid Vertical Table w/o table)" (page 1 of 1)

1