[ARCHIVED] Start text on new line after right justified image

[hburgiel]

I'm a new instructional designer at Lasell College.  We're exploring simple* methods for aligning figures and text on a Page without resorting to tables.  When using left or right justified images (e.g. style="float: right;") in Page design, is there a way to force the next block of text to start below the image?  The method I used to use in HTML is deprecated (https://www.sitepoint.com/clear-html-attribute/) and we’re not going to use CSS.  Maybe <div>?

* I'm comfortable with ul, br, align, float, border, padding, width, etc.  I can probably figure out div.  Whatever we do has to be do-able by the HTML and/or Rich Text editors.

[robotcars · Accepted solution]

HTML clear being deprecated shouldn't stop you from using CSS clear. HTML clear was deprecated because clear is better in CSS. You're already using CSS in style="float: right;" for your image, why not use style in the text?

...and the style attribute and clear work in the RCE.

<img alt="" src="https://via.placeholder.com/350x150" style="float: right;" />
<p style="clear: right; text-align: left;">
...and the style attribute and clear work in the RCE.</p>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Is this what you're looking for, or did I miss it?

[hburgiel]

Thank you!  That's exactly what I'm looking for. 

The answer to "why not use ...?" is "because I don't know enough CSS".

[robotcars]

Welcome!

I don't know what I'm doing half the time I try something either...

...but if you want HTML to do something different, CSS is most likely the best way. :smileygrin:

Here's another example for you, with inline style vs CSS selectors.

Clear Right - A Pen by Robert Carroll 

Check out

CSS Introduction - W3

CSS-Tricks 

CodePen - Front End Developer Playground & Code Editor in the Browser