Closed Bug 156189 Opened 22 years ago Closed 22 years ago

padding on CSS floats adds to the box dimensions

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows 98
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: cclarkson, Assigned: dbaron)

Details

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.1a) Gecko/20020611
BuildID:    2002061104

The padding on CSS floats adds dimensions to the box.

.float {
    background:         gray;
    float:              right;
    clear:              both;
    width:              200px;
    height:             100px;

    top:                25px;
}
The box above is rendered as 200 pixels wide and 100 pixels high.
The box below is rendered as 220 pixels wide and 120 pixels high.

.float_padded {
    background:         green;
    float:              right;
    width:              200px;
    height:             100px;

    top:                175px;
    padding:            10px;
}




Reproducible: Always
Steps to Reproduce:
1. The following document will render 3 colored boxes.
2. Each box should be the same size.
3. Box 2 has been padded, but the dimensions are 220 X 120. The padding has
expanded the box on all sides.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Stephenville Optimist Links</title>
    <style>
        body {
            background:         white;
            color:              black;
        }

        .box {
            position:           absolute;
            width:              420px;
            height:             400px;
            border:             solid red 1px;

            top:                100px;
            left:               100px;
        }

        /*  1   */
        .float_left {
            background:         gray;
            float:              left;
            width:              200px;
            height:             100px;

            top:                25px;
        }

        /*  2   */
        .float {
            background:         gray;
            float:              right;
            clear:              both;
            width:              200px;
            height:             100px;
        
            top:                25px;
        }
        
        /*  3   */
        .float_padded {
            background:         green;
            float:              right;
            width:              200px;
            height:             100px;
        
            top:                175px;
            padding:            10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="float_left"> 1 </div>
        <div class="float_padded"> 2 </div>
        <div class="float"> 3 </div>
    </div>
</body>
</html>



Actual Results:  Box 2 expanded to add padding.

Expected Results:  Box 2 should remain the same size and shrink the inner
content box.

I tested this with both recommended DTDs from the bug page and received the same
result.

As a reminder, the box model under CSS is:

margin:border:padding:content
> As a reminder, the box model under CSS is:
> 
> margin:border:padding:content

Yes, and "width" sets the width of _content_ while the background is painted
under content and padding.  So the layout you are seeing is in fact correct.

IE/Windows is known to get this completely wrong.  IE/Mac renders it the same
way as Mozilla.
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → INVALID
Note that IE6/Win gets it correct in its standards mode (if you have a
reasonably modern DOCTYPE, etc.).
You need to log in before you can comment on or make changes to this bug.