Known Participant

Question

Help to pack some float code

Forum|Forum|4 months ago
January 14, 2026
6 replies
831 views

Dear Dreamweaver Community,

I haven’t used DW for a long time so if you can help me with some coding I will get back on track.

I want to have 2-3 pictures WITH an explanatory text packaged in such away that they don’t stray away when moved around or spread apart on large screens.

I have tried the Insert/HTML/Figure command which gives placeholders for just ONE image and a caption. The caption text stacks up like a paragraph even if there is space under the image; looks clumsy.

I have seen in this forum a solution, “Float Figure Element” from Osgood_2021, which seems to be the right approach. Now putting these code threads together to get a working script that I can plug in – that’s where I need some help. Could somebody give me a hand? Thanks, Ingemar, 81 now

L

L e n a

Community Expert

Sorry for being a bit quiet over the weekend. Birnou and I were busy finalising our weekly office article, and I disconnected from messaging more than I thought.

Apologies as well for the keyboard shortcut confusion. I just realised I initially gave you the one we use in another context. To view the page source, it’s Ctrl + U on Windows, or Cmd + U on Mac, as @osgood_ mentioned.

@osgood_ also already pointed out, that the key element here is really the CSS Flex. It’s Flex that handles the layout and takes care of distributing the images in a row or stacking them in a column, depending on the screen size.

Regarding your next challenge, in fact nothing special needs to change in the CSS. The same Flex's rules apply whether you have 1, 2, 3, or more images, or using different size's images. Flex simply does the work. Just add or remove IMG tag in your HTML.

Only one small detail to keep in mind, by default, Flex uses align-items: stretch, which could stretch items vertically to match the tallest one. In our case, because the images are set to height: auto, they keep their natural proportions instead.

Then, for the image widths, again, this is handled by Flex. With flex: 1 1 0, all images grow or shrink evenly and ignore their original dimensions. That’s why it’s best to not use fixed width values, which will make the layout rigid.

I’ve placed a small demo here https://demo.puce-et-media.com/ingo9/multiple.html,you’ll see that the CSS doesn’t change at all when switching between 1, 2, 3, or more images, or use different sizes.

The JavaScript in the demo is only there to set the interface controls. It is not required at all for the gallery itself. It just helps avoid having multiple demo pages.

I

ingo9Author

Known Participant

Lena, Thanks a million! Everything works now: Different image proportions etc.

I just have to follow up all these mysterious Flex properties and values in the on-line course I'm doing now.
Have look at jpg attached if you want to see the reult.

Greetings, Ingemar

Wood-Bamboo-jpg.docx

L

L e n a

Community Expert

No special Flex code around this. How can it still work?

<div><img src="CONCRETE GRIP.jpg" width="220" height="165" alt=""/><img src="file:///D|/SOFT/Web__Jan_2026/Images/NEW 2026/CONCRETE GRIP 2.jpg" width="166" height="165" alt=""/></div>
<p><strong>Tooth plate expander for bamboo culm.<br> This concrete grip prevents "the wine cork escape"</strong></p>
By @ingo9

What makes the demo work is not the HTML you see in Design view, but the CSS that is applied to the page.

You can directly open the demo page in your browser and view the page source (ctrl shift U). You’ll then see how the images are wrapped and which CSS rules are used (right clik and inspect this element).

In your code, your images have fixed width and height values in the HTML. This makes the layout rigid. For a responsive box that adapts to screen size, you have to let CSS handle the sizing, not the HTML.

I

ingo9Author

Known Participant

Hi Lena,

I tried to open https://demo.puce-et-media.com/ingo9/ in my Chrome browser but Ctrl+Shift+U did not work.

With MouseRightClick and Inspect I got this code in the attached Word file visible. But not “flex” which is probably the most important for understanding the code.

I also tried to replace the “Placeholder Img” with my own and got a huge thing covering the screen although I had deleted the width and height values.

So, if you have new hints I admire your patience,

Ingemar

Word file attached

Hi_Lena_18jan.docx

O

osgood_

Legend

Hi Lena,
I tried to open https://demo.puce-et-media.com/ingo9/ in my Chrome browser but Ctrl+Shift+U did not work.
With MouseRightClick and Inspect I got this code in the attached Word file visible. But not “flex” which is probably the most important for understanding the code.
I also tried to replace the “Placeholder Img” with my own and got a huge thing covering the screen although I had deleted the width and height values.
So, if you have new hints I admire your patience,
Ingemar
Word file attached

By @ingo9

If you're viewing on a Mac in Chrome then the keyboard short cut to view the page source is:

Command + Option + U

Below is the source code from the page that Lena supplied a link to. Note the code between the <style></style> tags. That is css and is what controls the presentation of the html.

You just need to copy all the code below, paste it into a new empty Dreamweaver file and then replace the image src=''https://placehold.co/600x400" names with those of your own image file names.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Figure + Figcaption utilisant Flexbox</title>
  <style>
    /* Container for the whole figure */
    .figure-gallery {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 1rem;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }

    /* Images row */
    .figure-gallery .images {
      display: flex;
      gap: 1rem;
      flex-wrap: nowrap; /* always 3 in a row on large screens */
      width: 100%;
      box-sizing: border-box;
    }

    .figure-gallery .images img {
      flex: 1 1 0;
      min-width: 0; /* prevents flex overflow */
      max-width: 100%;
      height: auto;
      display: block;
      border: 1px solid #ccc;
    }

    /* Stack images vertically on smaller screens */
    /* you can dapat the 640 to your own needs */
    @36646830 (max-width: 640px) {
      .figure-gallery .images {
        flex-direction: column;
      }
    }

    /* Caption text */
    .figure-gallery figcaption {
      margin-top: 1rem;
    }

    .figure-gallery figcaption h2 {
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
    }

    .figure-gallery figcaption p {
      margin: 0;
      line-height: 1.5;
    }

    /* Small screens */
    @36646830 (max-width: 768px) {
      .figure-gallery .images {
        justify-content: center;
      }
    }
  </style>
</head>
<body>

<figure class="figure-gallery">

  <div class="images">
    <img src="https://placehold.co/600x400" alt="Placeholder image 1">
    <img src="https://placehold.co/600x400" alt="Placeholder image 2">
    <img src="https://placehold.co/600x400" alt="Placeholder image 3">
  </div>

  <figcaption>
    <h2>Image title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. This text stays visually linked
      to the images above.
    </p>
  </figcaption>

</figure>

</body>
</html>

Nancy OShea

Community Expert

Working example with Bootstrap. NO FLOATS method.

image.png

HTML (Copy & paste into new document):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5.3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid mt-3">
<div class="row">
<h1>Three equal width columns</h1>
<p>With responsive images. Add more as needed. </p>
<!--first col-->
<div class="col">
<figure><img class="img-fluid" src="https://picsum.photos/500/400/?random=4" alt="placeholder"><figcaption>Fig.1 - Lorem ipsum dolor...</figcaption>
</figure>
</div>
<!--second col-->
<div class="col">
<figure><img class="img-fluid" src="https://picsum.photos/500/400/?random=3" alt="placeholder"><figcaption>Fig.2 - Lorem ipsum dolor...</figcaption>
</figure>
</div>
<!--third col-->
<div class="col">
<figure><img class="img-fluid" src="https://picsum.photos/500/400/?random=2" alt="placeholder"><figcaption>Fig.3 - Lorem ipsum dolor...</figcaption>
</figure>
</div>
<!--/row--></div>
<!--/container--></div>
<!--BOOTSTRAP SCRIPT BUNDLE-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Post back if you have any questions.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Hi Nancy,

Thank you for the for Bootstrap code. I tried it but git the same deformed images as with Osgoods Grid method.

I think there is probably a trick to fix that as well. I will try the Flex also.

Thanks for all support from DW Forum!

Ingemar

Nancy OShea

Community Expert

Remove explicit height & width values from images.

Image size is handled by the CSS class and width of parent container <div class="col">.

<img class="img-fluid" src="your_image.jpg" alt="description">

Nancy O'Shea— Product User & Community Expert

L

L e n a

Community Expert

Thanks for the details, well, first of all, Osgood is still around on this forum. He may simply not have seen this thread yet, so his input could still come later.

In the meantime, we can try to help you get this gallery working.

The CSS you found is based on floats. Floats still work, but as @Nancy OShea said, today they are mostly replaced by Flexbox or Grid for this kind of layout. They are easier to use and behave better on different screen sizes, which is why they are usually recommended now.

Your idea of using figure and figcaption is fine. The layout issue is not really HTML, it’s mainly CSS. For 2 cor 3 images aligned horizontally with a text that stays clearly linked to them, a simple Flexbox setup is often the easiest solution.
Just to clarify, I understood that your goal was one single figure containing three images, displayed on one row on larger screens, and then stacked vertically below a certain screen width (here set around 640px)... So you can get a visual here https://demo.puce-et-media.com/ingo9/

If you want to read a bit more about Flex and Grid, CSS-Tricks and Smashing Magazine have good references. At Puce et Média, we also published an article about using Flex and Grid together, not as competitors but as complementary tools:
https://www.puce-et-media.com/grid-flex-mieux-ensemble-que-rivaux/

O

osgood_

Legend

Osgood is still around on this forum. He may simply not have seen this thread yet, so his input could still come later.

By @L e n a

I did observe the post yesterday but was awaiting further details. You have provided a good example using Flex, I have supplied another possibility using Grid.......both do the job.

Nancy OShea

Community Expert

Floats are outdated. Use Bootstrap Cards instead of Floats for this. See examples below.

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp

Nancy O'Shea— Product User & Community Expert

L

L e n a

Community Expert

If I understand correctly, you're looking for a way to keep 2-3 images and their comment text grouped together, so they stay aligned and don't mess apart when the layout changes on larger screens.

On the approach itself, using the figure / figcaption structure is actually a good and semantically correct choice. The spacing or stacking you're seeing between the image and the caption is not a structural limitation, but a CSS matter, and can be adjusted to better match your needs.

You're also right to mention Osgood's "Float Figure Element" solution. It's a solid reference, and linking back to that thread would be helpful for context. Osgood is still active on the forum as well, which makes follow-up or clarification even easier.

At this point, the key question is probably: how exactly would you like the images and text to behave together? For example, are you aiming for a horizontal grouping, a vertical stack, or something that adapts depending on screen size?

If you already have some code in place, feel free to share it. That would make it much easier to give you a concrete and well-fitted suggestion.

I

ingo9Author

Known Participant

Hi Lena,

Thanks for responding to my case. You understood exactly what I wanted; a few images lined up horizontally and a text clarifying the message. A chunk of text without the direct connection to the pictures would be just confusing.

If I here copy the code parts I found earlier, could you package them in such a way that I can just include a code script into my web page html? I would really appreciate your help!

Here is the html tool I found:

<figure>This is the content for Layout Figure Tag<figcaption>This is the caption for Layout Figure Tag</figcaption></figure>

So, the 2-3 images go into the first space <figure>, and the text goes into <figcaption>

The problem for me is that I can no longer figure out how I put the following code threads together with the html tool above and make it work. Osgood who wrote it may not be around to help me:

/* FLOAT FIGURE ELEMENT */

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}

/* THEN UPDATE THE CSS SELECTORS BELOW */

/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;

Thanks, Ingemar (ingo9 previously in this group)

O

osgood_

Legend

An alternative to flex would be to use grid:

<!DOCTYPE html>
<html lang="en">
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 16px;
}
figure {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 90%;
margin: 0 auto;
padding: 25px;
border: 1px solid #ccc;
}
figure img {
width: 100%;
}
figcaption {
grid-column: 1 / -1;
}
figcaption p {
margin: 0;
padding: 0;
}

@media screen and (max-width: 768px) {
figure {
grid-template-columns: 1fr;
}
}
</style>
<head>
<meta charset="UTF-8">
<title>Horizontally aligned images with caption using Grid</title>
</head>
<body>

<figure>
<img src="https://placehold.co/600x400" alt="">
<img src="https://placehold.co/600x400" alt="">
<img src="https://placehold.co/600x400" alt="">
<figcaption><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This text stays visually linked to the images above.</p></figcaption>
</figure>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded