tags:

views:

2417

answers:

4

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"&gt;
<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>
+1  A: 

add overflow:hidden; to the container <div>

Javier
A: 

I should have explained better. The box should stretch to accommodate the inner div contents.

Caveatrob
did you try the overflow:hidden; ? it's conterintuitive, but it does make an outer div to better fit contents
Javier
A: 

It looks good to me (in IE6 XP). What happens if you add the required title tag in the head? (e.g. <title>Test</title>)

Traingamer
+1  A: 

The 100% width on the body element is in relation to the view port, which is why you're background color is cutting when you scroll. Either set a width to your body at 1520px to encompase the contained div or add another div and do the following:

div.box { width: 100px; overflow: auto; }

However, as a word of warning, heading down the path of horizontal scrolling is a bad idea for a first project in css and in user experience.

Steve Perks