tests — block formatting context adjacent to float: using display:table
back to introduction
The same test, but using float:right instead of float:left.float block
div, in flow, no new block formatting context
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratof course, the sickest thing about them IS THE WAY POSTEROUS STRIPS ANYTHING OUT OF YOUR CODE THAT MIGHT LOOK INTERESTING...INCLUDING THE FUCKING YOUTUBE EMBED! GOOD WORK KEEPING THAT EMAIL BLOG TITLE RIDING HIGH!...but you can autopost it!...i know
paragraph, in flow, new block formatting context with display:table . Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
... Very pissed off, indeed, and all the more when heard as a talking piano... Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
Incredibly strange Talking piano (speaking piano) by artist Peter Ablinger personifies the voice of 12-tone composer, Schoenberg, both musically and to a man, through this elaborately prepared piano's 'voice', delivering an angry letter to an artist with whom he accuses of compromising his artistic integrity and wishes by employing a woman in the lead for his 'Ode to Napoleon'... Very pissed off, indeed, and all the more when heard as a talking piano...
Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
[cl1]
word.
word.
The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur.
[cl5] [cl6] [cl7] [cl8]
| 12. |
... ... Very pissed off, indeed, and all the more when heard as a talking piano... Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube) Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
Incredibly strange Talking piano (speaking piano) by artist Peter Ablinger personifies the voice of 12-tone composer, Schoenberg, both musically and to a man, through this elaborately prepared piano's 'voice', delivering an angry letter to an artist with whom he accuses of compromising his artistic integrity and wishes by employing a woman in the lead for his 'Ode to Napoleon'... Very pissed off, indeed, and all the more when heard as a talking piano...word.
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
[cl1]
[cl2]
[cl3]
[cl4]
The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur.
[cl5] [cl6] [cl7] [cl8]
index page section Previous Next Specification
12.
paragraph, in flow, new block formatting context with display:table . Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
a real html table. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat |
code
div.tablediv {display:table; background:#ffd4cc;} p.table-p { background:#ccc; display:table;} table {background: #daf2e8;} div#one {float:left; width:100px; height:200px; border:2px solid lime; background:#f1f1f1} Notes
- IE 5 Mac:
display:tableis not supported. A possible alternative is the use ofdisplay:inline-blockordisplay:inline-table. - IE Win:
display:tableis not supported. In order to establish a new block formatting context, elements must gain ‘haslayout’ — see On having layout.{zoom:1}is used here. - Konqueror 3.x: in this test file, the elements with
display:tableand thehtmltable slide under the floated block. More odd, the paragraph between the two elements withdisplay:tablealso slides under the floated block. Some debugging showed that this is caused by the linked style sheet having atitleattribute assigned. Removing that attribute, and the browser works correctly, as illustrated by this test case. The computed width of the elements appear to large, however. - These simple test cases work fine in iCab 3 (beta 382), Firefox 1.0x and newer, Safari 1.2 and newer, Opera 7.54 and 8.0x, 9.0 TP1, Mozilla 1.0 and newer. Older Webkit based browsers (v85, 1.1) have serious problems (the contents of the element flows under/over the floated block).
- There is a difference in handling the left and right margins on the elements with
display:table. Safari and Opera (and IE Windows) do one thing, Gecko based browsers and iCab do something else: Safari and Opera collapse the left or right margin, although they correctly compute the width of the element. This is correct, according to Section 9.5 (previous versions of the spec, up to the working draft released in November 2006 required no overlap between the margin-boxes; see the introduction for the details).
Last modified: May 24 2010 03:10:37 GMT.
- A [ La Chatte Noire ] development area
- [ contact ]
- [ sectionindex ]
- [ Empty Spaces ]
Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
... Very pissed off, indeed, and all the more when heard as a talking piano... Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube) Incredibly strange Talking piano (speaking piano) by artist Peter Ablinger personifies the voice of 12-tone composer, Schoenberg, both musically and to a man, through this elaborately prepared piano's 'voice', delivering an angry letter to an artist with whom he accuses of compromising his artistic integrity and wishes by employing a woman in the lead for his 'Ode to Napoleon'... Very pissed off, indeed, and all the more when heard as a talking piano...
Totally unique presentation both in concept and invention. Talking Piano Delivers Angry Schoenberg Message (Ablinger Videocube)
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
[cl1]
word.
[cl2]
[cl3]
[cl4]
The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur.
[cl5] [cl6] [cl7] [cl8]
| 12. |
