p1xel p1xel - 4 months ago 8
HTML Question

How do i use floats for images while using <figure> so that <figcaption> still shows under image?

When i use

<figure>
and
<figcaption>
with floating images, e.g

<figure>
<img id="one" src="xxx" />
<figcaption>Text</figcaption>
</figure>


and in CSS:

#one {
float: right;
}


the captions kind of stay on the page like regular text instead of appearing under respective
<img>
. How do I fix that? Does that have something to do with
display
?

Answer

Use clear on figcaption element:

figcaption {
  clear: both;
}