inline-formatting-context-009

Inline element widths are determined by the containing block and floated elements

WeasyPrint

This browser

Flags
ahem
Assertion
Inline element width is determined by the containing block and any floated elements.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: Inline element widths are determined by the containing block and floated elements</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting">
 7         <meta name="flags" content="ahem">
 8         <meta name="assert" content="Inline element width is determined by the containing block and any floated elements.">
 9         <style type="text/css">
10             #div1
11             {
12                 background: orange;
13                 font: 1in/1em Ahem;
14                 height: 2em;
15                 width: 3em;
16             }
17             #div2
18             {
19                 background: blue;
20                 float: right;
21                 height: 1em;
22                 width: 1em;
23             }
24             div div
25             {
26                 color: blue;
27             }
28         </style>
29     </head>
30     <body>
31         <p>Test passes if the orange box has a blue box on either side.</p>
32         <div id="div1">
33             <div id="div2"></div>
34             <div>X X X</div>
35         </div>
36     </body>
37 </html>