Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Simple HTML Problem

Posted by: Jmillz Nov 9 2019, 08:25 AM

Hi there. I'm a bit of a novice with HTML and having a slight problem. I'm wanting to left align an image with text next to it but when i do this the passage of text below ends up next to it as well (see image) please help!

On this page - Image of problem.

Thanks all.

Posted by: pandy Nov 9 2019, 09:16 AM

Yes. You use the align attribute in the IMG tag. That's basically the same as the CSS property float. Either way you do it text (and other inline content like other images) will be pushed aside as long as there's room for it beside the image. To stop that you need to "clear the float" as it's called if you use CSS.

You should really use CSS for the float too and not the align attribute, since that's very old school. But even if you keep align you can use CSS for the clear bit.

Best to put everything in your style sheet, but you can also do it inline. Either add the last line here to the rule for .body2...

.body2 {
   background-color: #383838;
   color: #ffffff;

   /* Add the below line to clear the float */
   clear: left;

... or use the style attribute in the corresponding HTML tag.

<div class="body2" style="clear: left">

Posted by: pandy Nov 9 2019, 01:44 PM

I should have explained what clear does. It basically tells the element it's attached to to stay free of the float and go to the highest available position below it.

The way we did it with HTML before we had CSS was to insert a BR tag before the stuff we wanted to go free from the float and use the clear attribute with it.
Like so.

<br clear="left">
<div class="body2">

But don't do that. Use the CSS clear even if you keep the align="left". All so called presentational stuff like this is gone from HTML now, so you shouldn't add more than you already have. And it's always a good thing to keep the HTML as clean as possible and not add unnecessary elements.

Powered by Invision Power Board (
© Invision Power Services (