Skip to main content
Known Participant
February 3, 2026
Question

Methods for placing image+caption

  • February 3, 2026
  • 1 reply
  • 49 views

Methods for placing image+caption   Feb 3

This website, largely targeting innovative bamboo construction methods, should work like a newspaper blog:

1  Often, only one image with just one caption – Image size can vary a lot! Caption and image stay together over different screen sizes. The <figure>-<img>-<figcaption> method should work if the total figure width can be controlled, say 150px? Caption will follow image if screen size changes.

2  Sometimes, 2-3 explanatory images in a row with text content connected as in a user manual - Image size could mostly be the same. Occasionally though, one image merits a larger height or width than the others in the row. Should be possible with Flex and  .figure-gallery.width {max-width:200px;…} or 30% for example. Two row grids are less relevant here.

3  Sometimes only text chunks like in an article. Normal <p> should do with random words in bold or italic. <span>, in-line. These text portions should also wrap around floated images like in Word.

Grateful for comments!

Ingemar

    1 reply

    Nancy OShea
    Community Expert
    Community Expert
    February 3, 2026

    Stop trying to make web pages behave like a printed user manual. It’s never going to work for every user on every device. That’s not how the web works. 

     

    If layout is of primary importance to you, I suggest you switch to InDesign & export your manual to Adobe PDF which users can download & view from your site. 

    https://www.adobe.com/products/indesign.html

    https://helpx.adobe.com/indesign/using/exporting-publishing-pdf.html

     

    Just my 5 cents.

     

    Nancy O'Shea— Product User & Community Expert
    ingo9Author
    Known Participant
    February 4, 2026

    The term ”user manual” was just to describe the need to have a few images related to a common topic with an accompanying caption that stays with the images to make sense. Actually, it has already been proved to work thanks to support in this forum. See point 2 in the “Methods…” beginning this thread.

    Downloadable PDFs are great as links on this website and already used since a long time. Thanks anyway for the suggestion.

    Inspiring
    February 4, 2026

    First of all I havn’t find any app jet how can replace Dreamwear, but I was also a user of Homsite and Macromedia Dreamwear and so the UI for Dreamweaver is not new for me, and then they atlas update PHP and Bootstrap, well done.

    Now to Images, I took litle thinking but you can place images relativt easy ther you will have theme I work on a travel journey and album just now. I use <figure><ficaption> with a travel class flotat: left; width:: 22% fore image adjust left and ajust right float:right; width: 20% for the journal

    -----------------------------------------------------------------------------------------------
    and for the album figure {   flex: 25%;   max-width: 25%;
      padding: 0 4px;}
    figure img {   margin-top: 8px;   vertical-align: middle; }

    I also use media max-with 800px resp, 600px  and here I use figure with a flex.and max-width 50 % resp 100%

    with this can I, in place max 4 images small size, 2 and 3 medium size and 1 full size with row, break

    all this inside a mother article with class I call .album with margin: auto; diplay: flex, flex-wrap: wrap; padding: 0 4px;