Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

How to align my content to the left?

+3
−0

This revolves around images. I'm trying to write an HTML page of COVID-19 safety procedures, and here's what I've written so far:

<!DOCTYPE html>

<html>
	<head>
		<title>COVID-19 Safety</title>
		<style>
			body {
				background-color: PEACHPUFF;
				margin-left: 300px;
				margin-right: 300px;
				margin-top: 50px;
				font-size: 20px;
			}
			img {
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	
	<body>
		<h1>To prevent the spread of COVID-19:</h1>
		<hr>
		<img src="img/wash-hands.png" alt="Wash hands." align="left">
		Clean your hands often. Use soap and water, or an alcohol-based hand rub.
		<hr>
		<img src="img/social-dis.png" alt="Social distance." align="left">
		Maintain a safe distance from anyone who is coughing or sneezing.
		<hr>
		<img src="img/mask.png" alt="Wear mask." align="left">
		Wear a mask when physical distancing is not possible.
		<hr>
		<img src="img/dont-touch.png" alt="DON'T TOUCH." align="left">
		Don't touch your eyes, nose or mouth.
		<hr>
		<img src="img/cover.png" alt="Cover mouth and nose." align="left">
		Cover your nose and mouth with your bent elbow or a tissue when you cough or sneeze.
	</body>
</html>

I got the styles added, the lines, the pictures. But now my problem lies on alignment. Here's how the result looks like in Chrome:

Result I didn't want:

I wanted it this way:

Result I wanted:

Don't mind the images being different. I'm struggling with the fact these images won't align and I'm not sure how to fix it. So where to begin?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

2 answers

+6
−0

If you remove the align="left" then it works fine.

My best guess is that you put those in because you didn't want the image in the text flow, affecting the vertical positioning on the text. The easiest solution to that is to float them: add float: left; to the CSS for img, and

hr {
    clear: both;
}

to make the horizontal rules move past the floated content.

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

General (1 comment)
+6
−1

This isn't so much an issue of left/right alignment, as the browser beginning the rendering of each consecutive block wherever the content of the preceding block ends, instead of past the bottom of the preceding block. Since the text content of each text block doesn't require the full height of the image to render, this causes images further down to be pushed to the right, reducing the width available for the text block which causes that to require additional height, and so on until it resets because the text can't fit in the remaining horizontal space.

The easiest way to deal with this is probably to encapsulate each section in an outer element, such as <div>, and set an appropriate display style on it to instruct the browser to lay them out vertically, one after the other. For example, if you replace the body of your document with:

<h1>To prevent the spread of COVID-19:</h1>
<hr>
<div>
    <img src="img/wash-hands.png" alt="Wash hands." align="left">
    Clean your hands often. Use soap and water, or an alcohol-based hand rub.
</div>
<hr>
<div>
    <img src="img/social-dis.png" alt="Social distance." align="left">
    Maintain a safe distance from anyone who is coughing or sneezing.
</div>
<hr>
...and so on...

and add to the CSS

div { display: table-row; /* or try flex */ }

then you will get something very close to the effect you're after.

If you want to, with this in place, you can also use the <div> CSS to add a bottom border to the elements, thereby removing the need for the <hr> element.

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

Don't use `display: table-row` for this (1 comment)

Sign up to answer this question »