ansaurus

Question

Simple CSS Layout

Answer 1

+4 A:

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

Instead of setting the size of the parent dynamically, control child2's height.

Hope that is what your asking for.

Edit: Edited as per your update!

loxxy 2010-07-28 03:35:18

That won't do it; `child2`'s `height: auto` means it will be sized to the height of its contents.

Vineet 2010-07-28 06:16:14

That was actually before he edited his post.

loxxy 2010-07-28 07:54:04

Answer 2

A:

If #parent always have 500px height, and #header, why not just putting 480px (1) to #body?

(1) Of course you have to discount any vertical margin or padding.

PS: Testing in IE6 may not be worth the time nowadays

alcuadrado 2010-07-28 03:37:23

IE6 is a requirement for many organizations since there are still plenty of IE6 users out there.

Gert G 2010-07-28 03:43:58

That's true unluckly, but for the standard non-enterprise website you can forget about ie6, even google is doing this

alcuadrado 2010-07-28 03:57:26

Unfortunately, the site's audience will include office workers most likely forced to use IE6 or 7. Portability is essential :(

Louis 2010-07-28 05:21:44

Answer 3

+1 A:

If you already know the height of outer container, and the one of height of the divisions inside, you can know the height of the remaining div I think.

try something like this height: 480px;. Keep it simple and easy

Starx 2010-07-28 03:37:48

Answer 4

+1 A:

Unfortunately, this isn't as simple a problem as you think it ought to be. You can use some javascript to change the height of body based on parent's computed height.

But the simplest thing may be to just set bodys height to 100%, and set overflow: hidden on the parent div.

This way the body will have a height equal to the parent, but the bottom 20px will just be clipped. This may or may not be acceptable, depending on what you're doing with the body, and whether its content will potentially reach the bottom.

Another approach would be to use:

#header { height: 20px; }
#body { height: 480px; }
#parent { height: auto; }

and have body be the one that gets resized by the script, rather than parent. parent will automatically be sized to surround the total height of header + body.

Vineet 2010-07-28 06:28:43

Answer 5

+1 A:

My solution for a page where parent has a dynamic height:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
            }

            #parent {
                height: 80%;
                width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 120px;
                background-color: #456;
                position: relative;
                z-index: 101;
            }

            #body {
                height: 100%;
                margin-top: -120px;
                background-color: #789;
                position: relative;
                z-index: 100;
            }

            #spacer {
                height: 120px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="header"></div>
            <div id="body">
                <div id="spacer"><!-- Padding will just increase body's height. --></div>
                Body content.
            </div>
        </div>
    </body>
</html>

Daniel 2010-07-28 06:57:40

ansaurus

tags:

views:

answers:

Simple CSS Layout

related questions