OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | |
5 <style> | |
6 .cell { | |
7 width: 50px; | |
8 height: auto; | |
9 min-height: 50px | |
10 } | |
11 | |
12 .invisibleFont { | |
13 color: lime; | |
14 } | |
15 | |
16 .floatLeft { | |
17 float: left; | |
18 } | |
19 | |
20 .clearLeft { | |
21 clear: left; | |
22 } | |
23 | |
24 .floatChild { | |
Manuel Rego
2014/11/12 14:11:53
This is not used in the this file, so it should be
jfernandez
2014/11/12 14:23:39
Done.
| |
25 float: left; | |
26 clear: both; | |
27 } | |
28 | |
29 .relative { | |
30 position: relative; | |
31 } | |
32 </style> | |
33 </head> | |
34 | |
35 <body> | |
36 | |
37 <div>This test checks that grid item sets a new formatting context for its conte nt, preventing any 'float' protruding content on the adjoining grid item.</div> | |
38 | |
39 <div> | |
40 <div class="cell relative floatLeft firstRowFirstColumn"> | |
41 <div>Float1</div> | |
42 <div>Float2</div> | |
43 <div>Float3</div> | |
44 <div>Float4</div> | |
45 </div> | |
46 <div class="cell floatLeft firstRowSecondColumn"> | |
47 <div class="invisibleFont">Float1</div> | |
48 <div class="invisibleFont">Float2</div> | |
49 <div class="invisibleFont">Float3</div> | |
50 <div class="invisibleFont">Float4</div> | |
51 </div> | |
52 <div class="cell floatLeft clearLeft secondRowFirstColumn"></div> | |
53 <div class="cell floatLeft secondRowSecondColumn"></div> | |
54 </div> | |
55 | |
56 </body> | |
57 </html> | |
OLD | NEW |