Why is my image overlapping with other elements when I use "align"?

Question

On my website, I wanted to have some text wrap around an image, so I used the align="left" method. But when I run it, it overlaps with the element below it.

Before I added align="left":

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>
</p>

And after:

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg" align="left">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>
</p>

As you can see, once I added the align attribute, the picture became lodged in the products bar. How can I fix this without messing it up too much?

score 3 · Answer 1 · answered May 10 '20 at 06:16

You should not use align in HTML as it is not supported in HTML5.

Try using CSS float instead.

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
    float: left;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
    clear: both;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>

It is important to set the clear once you want the floating to stop.

SMAKSS · Accepted Answer · 2020-05-11T14:24:02.593

To achieve this you got two ways:

Using clear: both (not recommended at all). First of all, since you are using align (which will transform to float) as @Torf said, you should specify where to float get stops. So you should simply add clear: both; on your floated element.

So your final code should be something like this:

.employeeweek {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 200px;
  height: 200px;
  float: left;
}

#products {
  color: green;
  background-color: purple;
  text-align: center;
  clear: both;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
  <h1 id="products">OUR PRODUCTS</h1>

Using flexbox or grid (which is highly recommended). I will go with the flexbox in this case. to achieve such a thing you should wrap your image and paragraph into another div and then add display: flex; to it, which makes their child follow the flex rules. You can read more about the flexbox here and about the grid here.

So your final output should be something like this:

.context {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.employeeweek {
  margin: 0 5px;
  display: block;
  width: 200px;
  height: 200px;
}

.context>p {
  margin: 0 5px;
}

#products {
  color: green;
  background-color: purple;
  text-align: center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<div class="context">
  <img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
  <p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>
</div>
<!--PRODUCTS-->
<p>
  <h1 id="products">OUR PRODUCTS</h1>
</p>

@LemmyX What do you mean by wrapping around the text exactly? Can you share a photo or something of your desired one? — SMAKSS, May 11 '20 at 04:02
I mean, when you use align=left, you type text under it and it automatically gets formatted to fit around the image. — LemmyX, May 11 '20 at 14:18
@LemmyX Actually you can't do it with `flex` (Since `flex` items are blockified), so if you want to wrap text around your image, you should stick with the `float` approach (First approach). — SMAKSS, May 11 '20 at 14:34

Why is my image overlapping with other elements when I use "align"?

2 Answers2