CSS has a value for the display attribute called run-in<\/tt>. It’s like this:<\/p>\n

h3 {\r\n  display: run-in;\r\n}<\/code><\/pre>\n
The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques.<\/p>\n
<\/p>\n
Let’s take a closer look.<\/p>\n
<\/p>\n
But why not __________?<\/h3>\n
But why not float it to the left?<\/strong> Well headers are often of larger font-size than body type. So if you float the header to the left, you might catch more than one line.<\/p>\n
<\/p>\n
But why not make it an inline element?<\/strong> Because the following text might be (actually, is likely to be) inside of a paragraph tag. Paragraph tags are block-level, and thus the will break to a new line if they follow an inline element and the effect will not be achieved. You could insert the <h3> tag within<\/em> the <p> tag, but that has semantic concerns, and more importantly, long term maintenance concerns. What if this effect goes out of vogue?<\/p>\n
But why not use inline-block?<\/strong> Same problem as above. The effect will not be achieved unless you tuck the header into the following paragraph which is problematic.<\/p>\n
How does it work then?<\/h3>\n
If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element. <\/p>\n
Browser Support<\/h3>\n
Haven’t heard much about this? Well it might be because browser support is a bit weird.<\/p>\n
Rumor has it that Mozilla isn’t happy<\/a> with the spec<\/a>. Firefox doesn’t support it at all, including the version 4 betas.<\/p>\n
The WebKit family (Safari and Chrome) are supporting it, as well as Opera and IE 8. There are some differences in how these browsers handle things though. Reports have it<\/a> that older versions of WebKit and Konqueror allowed run-in elements to run into succeeding inline elements which is incorrect.<\/p>\n
Issues in the spec?<\/h3>\n
In my own reading of the spec, I find it a bit unclear. <\/p>\n
If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.<\/p><\/blockquote>\n
That makes sense and appears<\/em> to be how it works, but does “becomes the first inline box”<\/em> mean that the run-in box should become a descendant of the block box? In WebKit, the run-in element retains its solidarity<\/a>.<\/p>\n
A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.<\/p><\/blockquote>\n
Does that mean that there can’t be two headers, both run-ins, that run into a paragraph below? That’s how I would read it, but I think the WebKit implementation where they both fall inside<\/a> makes more sense. Opera and IE 8 follow the spec in that the first run-in becomes block and the second goes inline. <\/p>\n
Then it says:<\/p>\n
Otherwise, the run-in box becomes a block box.<\/p><\/blockquote>\n
Otherwise<\/em> is a big word, but implementations have been pretty good here. Three run-in’s in a row inside a parent with no other siblings? They all go block. A run-in sandwiched between two inline elements? It goes block. Run-in > absolute-position > block, the run-in goes block. Mind-bending, I know, but current modern browsers are doing good here.<\/p>\n
If the run-in element contains anything block-level, it becomes block-level. All browsers seem to agree on that one.<\/p>\n
Demos<\/h3>\n
Here is my own simple demo page<\/a>. There is also a super hardcore demo<\/a> (which is over 10 years old).<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS has a value for the display attribute called run-in. It’s like this: h3 { display: run-in; } The point […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-596","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":333934,"url":"https:\/\/css-tricks.com\/is-css-float-deprecated\/","url_meta":{"origin":596,"position":0},"title":"Is CSS float deprecated?","author":"Robin Rendle","date":"February 11, 2021","format":false,"excerpt":"An interesting conversation came up at work the other day: Should we use the CSS float property now that we have CSS Grid and Flexbox? The short answer No! Well, mostly. I\u2019d only use it today for wrapping text around images, though and I\u2019d avoid using float entirely for layouts.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":674,"url":"https:\/\/css-tricks.com\/designing-the-digg-header-how-to-download\/","url_meta":{"origin":596,"position":1},"title":"Designing the Digg Header: How To & Download","author":"Chris Coyier","date":"April 4, 2008","format":false,"excerpt":"The design of Digg is full of smart ideas. The site identity is strong but doesn't take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":501,"url":"https:\/\/css-tricks.com\/prevent-menu-stepdown\/","url_meta":{"origin":596,"position":2},"title":"Prevent Menu “Stepdown”","author":"Chris Coyier","date":"February 6, 2008","format":false,"excerpt":"If you are familiar with the concepts of \"floats\", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements \"stepdown\"? This is a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":153033,"url":"https:\/\/css-tricks.com\/arranging-elements-top-bottom-instead-left-right-float\/","url_meta":{"origin":596,"position":3},"title":"Arranging Elements from Top to Bottom instead of Left to Right (float: down?)","author":"Chris Coyier","date":"October 15, 2013","format":false,"excerpt":"Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right). So markup like: 1 2 3 4 5 6 Which would end up like: 1 4\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":435,"url":"https:\/\/css-tricks.com\/typography-study-the-design-canopy\/","url_meta":{"origin":596,"position":4},"title":"Web Typography Study: The Design Canopy","author":"Chris Coyier","date":"December 22, 2007","format":false,"excerpt":"Web design studio The Design Canopy (update October 2012: Design Canopy link is dead) is a beautifully designed site that makes use of a variety of beautiful web typography techniques. Here are some screen shots from different areas of the site that I find particularly nice. The technique I want\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":338290,"url":"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/","url_meta":{"origin":596,"position":5},"title":"Float an Element to the Bottom Corner","author":"Temani Afif","date":"April 19, 2021","format":false,"excerpt":"Need to lay out an element to the right or the left, such that text wraps around it? That\u2019s an easy task for the float property. But what about if you also want to push that element (let\u2019s call it an image) to one of the bottom corners while we\u2019re\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":6939,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/596\/revisions\/6939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}