Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

71%

+8 −2

Q&A How to align my content to the left?

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

posted 2y ago by Canina‭ · edited 8mo ago by meta user‭

Answer

#4: Post edited by

meta user‭ · 2023-09-02T05:30:11Z (8 months ago)
adding headings, add 4-space indent in CSS, changed grammar

Copy Link

Raw

Markdown

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.

Misconception
-
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.
Issue
-
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.
Solution
-
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 desired effect.
Other ideas
-
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.

#3: Post edited by

Canina‭ · 2021-11-24T15:46:11Z (over 2 years ago)

Copy Link

Raw

Markdown

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.
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. 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, then you can also use the `<div>` CSS to add a bottom border to the elements, to remove the need for the `<hr>`.~~

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.

#2: Post edited by

Canina‭ · 2021-11-24T15:40:41Z (over 2 years ago)

Copy Link

Raw

Markdown

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.
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. 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: flex; /* or try table-row */ }~~
then you will get something very close to the effect you're after.
If you want to, then you can also use the `<div>` CSS to add a bottom border to the elements, to remove the need for the `<hr>`.

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.
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. 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, then you can also use the `<div>` CSS to add a bottom border to the elements, to remove the need for the `<hr>`.

#1: Initial revision by

Canina‭ · 2021-11-24T15:39:14Z (over 2 years ago)

Copy Link

Raw

Markdown

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.

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. 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: flex; /* or try table-row */ }

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

If you want to, then you can also use the `<div>` CSS to add a bottom border to the elements, to remove the need for the `<hr>`.

Communities

Post History