CHAPTER 13 ■ BLOCKSRun-In
Problem You want to run a block into the following sibling block as if it were an inline element within
the following block. For example, you may want to run a heading into the following
paragraph for a more compact presentation. You may also want to run a series of blocks
into another block.
Solution CSS provides the rule display:run-in for this purpose, but only Opera, Safari, and
Konquerer support it. You can implement a run-in by wrapping the run-in block and the
destination block inside a container block. You can then assign display:inline to these
two blocks to render them inline. Displaying them inline causes the run-in block to merge
into the first line of the destination block. By wrapping both blocks in a container block, you
can transfer any block styles to the container block that you would have applied to the
destination block, such as margins, borders, padding, or a background.
If you want to run multiple blocks into a final block, you can assign the entire series of
blocks to display:inline and wrap them all in one block.
Of course, it would be much better if Internet Explorer and Firefox simply implemented
run-ins.
Pattern
HTML
CSS RUN_IN_BLOCK_SELECTOR { display:inline; }^
DESTINATION_BLOCK_SELECTOR { display:inline; }
Location This pattern applies to block elements.
Tips Because the run-in container encloses the run-in and destination blocks, you can take
advantage of descendant selectors to apply additional styles to the run-in block and the
destination block.
This design pattern works even if you do not wrap the run-in and destination blocks in a
container block. Since the run-in and destination blocks are displayed inline, the browser
creates an anonymous block box to hold them. The problem with the anonymous block box
is that you cannot transfer any block styles from the destination block to the anonymous
block box. This is a problem only if you have block styles you need to transfer, such as
margins, borders, padding, or a background.
Example In the example, I transferred the indent class from the destination paragraph to the run-in
container. I also used a descendant selector to insert extra padding between the run-in
heading and the destination paragraph. Using another descendant selector, I styled the
destination paragraph as italic.
Related to Section, Inlined; Run-In Alert (Chapter 20)