CODEWITHSUNDEEP
htmlcss
Patrick Reck
Patrick Reck

Reputation: 303

Why isn't my DIV children the same height as parent

I have been struggling with this for awhile now, and I can't seem to find any solution. I have a frame, a top box, a left box and a right box and a middle box containing the last two.

I want these to be the height of the frame minus the height of the top box. This would result in the frame being filled, nothing more and nothing left.

What is wrong with my current code, and what would be a proper way to achieve this?

Here's the code:

<html>
    <head>
        <style type="text/css">
            #frame {
                width: 800px;
                min-height: 500px;
                border: 1px solid black;
            }

            #top {
                width: 800px;
                height: 80px;
                float: left;
                background-color: #666;
            }

            #middle {
                width: 800px;
                height: 100%;
                float: left;
            }

            #left {
                width: 200px;
                height: 100%;
                float: left;
                background-color: #B3B4BD;
            }

            #right {
                width: 600px;
                height: 100%;
                float: left;
                background-color: #99BC99;
            }
        </style>
    </head>
    <body>
        <div id="frame">
            <div id="top">Top</div>

            <div id="middle">
                <div id="left">Left</div>
                <div id="right">Right</div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 181

Answers (2)

Neil
Neil

Reputation: 55382

You can't specify a 100% height unless you explicitly set the parent's height. The reason is that the parent normally expands in height to fit its children, and you need to specify an exact height so that the parent knows what its height is in time for its children to need it.

That said, there are a number of ways of achieving a similar effect. For instance if one div is normally taller than the other then you can use absolute positioning to stretch the second div to the same height. Or if you're really desperate then you can use a table.

Upvotes: 2

Jason
Jason

Reputation: 3360

Try using proportions instead of exact pixels.

        #frame {
         width: 80%;
         min-height: 500px;
         border: 1px solid black;
         margin-right:auto;
         margin-left:auto;

        }

        #top {
            width: 100%;
            height: 80px;
            float: left;
            background-color: #666;
        }

        #middle {
            width: 100%;
            height: 100%;
            float: left;
        }

        #left {
            width: 33%;
            height: 100%;
            float: left;
            background-color: #B3B4BD;
        }

        #right {
            width: 66%;
            height: 100%;
            float: left;
            background-color: #99BC99;
        }

jsFiddle

Here's a screenshot of your demo with the updated CSS: Screenshot of your demo with updated CSS

Upvotes: 0

Related Questions