Answers.Body: <p>My guess is no. You want the img (or the div container) to be a block element. At the same time, you want the image to act like an inline element -- adjusting to the display. </p>
  
  <p>A block element by definition cannot switch order  with other elements depending on the display. In other words, you have to change the semantics to get what you want. But you still are not changing the order of elements. </p>
  
  <p>One thought is that you could use CSS media queries to conditionally change the img or div elements from block display to inline display depending on the device's screen dimensions.  That might help if you could boil your use cases to maybe two or three display sizes. </p>
  
  <p>I am not a css expert, so I'd love to hear if there is a way that works. But my guess is currently no, and even if a method exists, it probably won't be supported on Kindles anytime soon. </p>
  
  <p>I don't know much about Latex, but it can perform these conditional tricks because you are dealing with a fixed display size. With ebooks you are dealing with an endless variety of display sizes and devices. </p>
  
  <p><strong>UPDATE:</strong> I'm having second thoughts about the answer. CSS has some new mechanisms like flexbox and grid formatting to deal with these cases. I could easily see a time in the next 5 years where ebook readers can deal with positioning of an image on a fixed point in the page. <a href="http://epubsecrets.com/easy-css-wins.php" rel="nofollow noreferrer">Jimmy Panoz pointed out</a> that because reading systems use browser rendering systems, eventually reading systems will allow you to use  CSS Feature Queries to try CSS  experimental features.  </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-10T18:48:50.763Z
Answers.Text: Panoz referred me to the float and fold trick which might work. https://medium.com/@jiminypan/image-wizardry-in-ebooks-3ea96064d0a6 (midway down). Too many caveats to be practical though.
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-09T14:51:33.067Z
Answers.LastActivityDate: 2017-08-09T17:48:37.943Z
Answers.LastEditDate: 2017-08-09T17:48:37.943Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>Before I start, let me be clear about what I’m <em><strong>not</strong></em> trying to do:</p>
  
  <ul>
  <li>I’m <strong>not</strong> trying to keep particular text on the same page as an image.</li>
  <li>I’m <strong>not</strong> trying to force a page break before an image.</li>
  </ul>
  
  <p>That said, I’m looking for the approximate equivalent of <a href="https://tex.stackexchange.com/q/35125/2966">LaTeX’s <code>\begin{figure}[ht]</code></a>. Basically,</p>
  
  <ul>
  <li>If there’s enough room on this page for the image, put it here.</li>
  <li>Otherwise, put it on the top of next page—but <strong>don’t break the page here</strong>; put the next paragraphs of text here until the end of the page.</li>
  </ul>
  
  <p>Can this be done with HTML+CSS? (The answer to <em><a href="https://ebooks.stackexchange.com/q/4700/3086">Can I float an image to the top or the bottom of the screen?</a></em> is not encouraging, but does not address this directly.)</p>
  
Tags: <html><css><image>
Title: Move image to top of the page (like LaTeX’s \begin{figure}[t])
UserDisplayName: J. C. Salomon
ThreadText: # Move image to top of the page (like LaTeX’s \begin{figure}[t])
  
  (Asked by: username_0 on 2017-08-08)
  
  Before I start, let me be clear about what I’m ***not*** trying to do:
  
  * I’m **not** trying to keep particular text on the same page as an image.
  * I’m **not** trying to force a page break before an image.
  
  That said, I’m looking for the approximate equivalent of [LaTeX’s `\begin{figure}[ht]`](https://tex.stackexchange.com/q/35125/2966). Basically,
  
  * If there’s enough room on this page for the image, put it here.
  * Otherwise, put it on the top of next page—but **don’t break the page here**; put the next paragraphs of text here until the end of the page.
  
  Can this be done with HTML+CSS? (The answer to *[Can I float an image to the top or the bottom of the screen?](https://ebooks.stackexchange.com/q/4700/3086)* is not encouraging, but does not address this directly.)
  
  **Tags:** html, css, image
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-08-09. Score: 1
  
  My guess is no. You want the img (or the div container) to be a block element. At the same time, you want the image to act like an inline element -- adjusting to the display.
  
  A block element by definition cannot switch order with other elements depending on the display. In other words, you have to change the semantics to get what you want. But you still are not changing the order of elements.
  
  One thought is that you could use CSS media queries to conditionally change the img or div elements from block display to inline display depending on the device's screen dimensions. That might help if you could boil your use cases to maybe two or three display sizes.
  
  I am not a css expert, so I'd love to hear if there is a way that works. But my guess is currently no, and even if a method exists, it probably won't be supported on Kindles anytime soon.
  
  I don't know much about Latex, but it can perform these conditional tricks because you are dealing with a fixed display size. With ebooks you are dealing with an endless variety of display sizes and devices.
  
  **UPDATE:** I'm having second thoughts about the answer. CSS has some new mechanisms like flexbox and grid formatting to deal with these cases. I could easily see a time in the next 5 years where ebook readers can deal with positioning of an image on a fixed point in the page. [Jimmy Panoz pointed out](http://epubsecrets.com/easy-css-wins.php) that because reading systems use browser rendering systems, eventually reading systems will allow you to use CSS Feature Queries to try CSS experimental features.
  
  > **Comments:**
  > **username_1**: Panoz referred me to the float and fold trick which might work. https://medium.com/@jiminypan/image-wizardry-in-ebooks-3ea96064d0a6 (midway down). Too many caveats to be practical though.  
  
  ---
  
  