Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inner div exceeds outer div boundaries

Tags:

html

css

I can't get the inner div (with Hello World) to fit inside the "box" div in this code example (also at http://www.toad-software.com/test.html).

Despite the body being set to 100%, the inner div will not be contained! This is a test case for a larger project in which a variable-width table exceeds the boundaries of its container. The table would be in the inner div and the container would the "box."

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style type="text/css">
        /*html { width: 100%; height: 100%; position: relative; background: #c0c0c0; }
        body { position: absolute; width: 100%; height: 100%; background: #f9f9f9; }*/

        body,
        html 
        { 
            margin: 0;
            padding: 0;
        }

        body
        {
            width: 100%;
        }

        div.box
        {
            padding: 10px;
            background: #ff33ff;
        }

    </style>
</head>
<body>
    <div class="box">
        <div style="width: 1500px; height: 900px; background: #f12;">Hello World</div>
    </div>
</body>
</html>
like image 597
Caveatrob Avatar asked Nov 03 '08 20:11

Caveatrob


1 Answers

add overflow:hidden; to the container <div>

like image 137
Javier Avatar answered Sep 21 '22 14:09

Javier