ansaurus

Question

CSS div/overflow Question: Why does the first HTML file work but not the second?

Answer 1

A:

I hope this is what you mean:

I've moved the overflow-x and width rules to #divTopFieldSet - the contents of the div correctly scrolls when the body becomes too narrow to contain the table.

To tell you the truth, I'm not 100% sure of the root cause of this. When an element with a percentage width is set to overflow:scroll, it doesn't automatically shrink to crop its contents - it seems like the children of the element play a part. Because the table has a minimum width of its own (determined by the contents of the cells), the surrounding container will not shrink past the outer edge of the table. On top of that, there is the calculation of percentage widths - width:99%; means '99% of the parent container's width' - if the parent container isn't based on the size of the viewport, that 99% won't change when you resize, either.

Applying the overflow rule to a container further up the tree (divTopFieldSet) does work, though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"></meta>
    <style type="text/css">
        #divBody {
            margin-top: 5px;
            top:24px;
            margin-top: 10px;
        }            
        #divContainer 
        {
            top: 5px;
            position:relative;
            min-height:100%;
            #width:expression(document.body.clientWidth < 830? "800": "90%" );
            width:90%;
            min-width: 800px;
            padding-bottom:70px;
        }
        #divTopFieldSet {
            position:relative;
            margin:5px;
            top:5px;
            width:99%;
            overflow-x:scroll;
        }
        #divRadioButtonArea {
            position:relative;
            top:20px;
            height:51px;
            font-size: 12px;
            width:99%;
            margin:5px;
        }
        #divTable {
            margin:5px auto;
        }

    </style>
    <title>TEST TEST</title>
</head>


<body id="divBody">
    <div id="divContainer" class="gridRegion">

        <div id="divTopFieldSet">
            <fieldset style="margin: 5px;">
                <legend style="font-size: 12px; color: #000;">Numbers</legend>
                <div id="divTable">
                    <table border="1px">
                    <tr>
                        <td>One
                        </td>
                        <td>Two
                        </td>
                        <td>Three
                        </td>
                        <td>Fout
                        </td>
                        <td>Five
                        </td>
                        <td>Six
                        </td>
                        <td>Seven
                        </td>
                        <td>Eight
                        </td>
                        <td>Nine
                        </td>
                        <td>Ten
                        </td>
                        <td>Eleven
                        </td>
                        <td>Twelve
                        </td>
                        <td>Thirteen
                        </td>
                        <td>Fourteen
                        </td>
                        <td>Fifteen
                        </td>
                        <td>Sixteen
                        </td>
                        <td>Seventeen
                        </td>
                        <td>Eighteen
                        </td>
                        <td>Nineteen
                        </td>
                        <td>Twenty
                        </td>                        
                    </tr>
                    </table>
                </div>
            </fieldset>
        </div>


        <div id="divRadioButtonArea">
            <fieldset style=" padding-left: 5px;">
                <legend style="color: #000;  height:auto">Colors</legend>
                <table style="width:100%;padding-left:5%;padding-right:5%;">
                    <tr>
                        <td>
                            <input type="radio" name="A" value="Y"/><label>Red</label>
                        </td>
                        <td>
                            <input type="radio" name="O" value="O"/><label>White</label>
                        </td>
                        <td>
                            <input type="radio" name="W"/><label>Blue</label>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

    </div>
</body>
</html>

Let us know if this isn't what you need...

Beejamin 2010-03-30 20:00:07

Thanks for taking a look at it Beejamin. I took a look at the first code snippet and ran it side by side with your solution, and it's about the same.Based on what you said, it sounds like the order that the browser calculates width(s) has something to do with the fact that the second code snippet doesn't properly utilize the overflow scrolling mechanism. Any ideas on the order that the browser calculates dimensions?If the body is the parent div to everything and the container div took 90% of that width, and then it kept going down from parent-to-child, I would expect overflow to work.

2010-03-30 21:05:40

ansaurus

tags:

views:

answers:

CSS div/overflow Question: Why does the first HTML file work but not the second?

related questions