The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Text problem Reply To: Text problem


Judging from your image (note the images in your Codepen do still not show up), I’d start with making sure that the inline-block divs are set to vertical-align:top.

However, I don’t that that will solve the basic issue.

When the text wraps it make the element taller and you need a layout method that will equalise the heights of the elements automatically. I’d use flexbox or CSS Grid but that will depend on your own requirements.

As I mentioned before trying to reduce the font-size because the text wraps is a job for Javascript and frankly…would look odd.

A couple of other things.

  1. <center> is an obsolete element and should no longer be used.
  2. You should really wrap your raw text in a proper text element like a p or a span.

You might want to look into the figure element and it’s associated figcaption child.