The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Simple HTML Problem, HTML Issue
Jmillz
post Nov 9 2019, 08:25 AM
Post #1





Group: Members
Posts: 1
Joined: 9-November 19
Member No.: 27,037



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 https://milesofmotion.co.uk/window-tint-law-in-the-uk.

https://ibb.co/MNPsFxF - Image of problem.

Thanks all.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 9 2019, 09:16 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,460
Joined: 9-August 06
Member No.: 6



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...

CODE
.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.

CODE
<div class="body2" style="clear: left">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 9 2019, 01:44 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,460
Joined: 9-August 06
Member No.: 6



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.
https://htmlhelp.com/reference/html40/special/br.html
Like so.

CODE
<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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2019 - 12:25 AM