Need help wrapping text around an image

HTML & CSS
1

I’m using the following html and css to provide employee information with an image. I’m fine with the row and column layout, but for the life of me I can’t figure out how to get the employee image to appear where I would like it. What I want is for the image to appear in the upper right of the left column and in the upper left of the right column, with the text wrapped around it in each column. Assistance will be greatly appreciated.
Thank you in advance,
Andrew

CSS
        .employee-wrapper {
            margin: 0px;
			border: 3px dotted blue;
			padding-bottom: 2em;
        }
        .employee-row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            border: 2px dotted pink;
        }
            .employee-row p {
                float: left;
                color: #FDFDFD;
                font-family: 'Montserrat', sans-serif;
                line-height: 131%;
                font-size: 14px;
                text-align: left;
            }
            .employee-row h2 {
                color: #FDFDFD;
                font-family: 'Roboto Slab', serif;
                font-weight: bold;
                margin: 0;
                font-size: 20px;
                padding: 0;
                line-height: 120%;
                text-align: left;
            }
            .employee-row h3 {
                color: #FDFDFD;
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                margin: 0;
                padding: 0;
                line-height: 190%;
                font-size: 14px;
                font-weight: normal;
            }
        .employee-column {
            display: flex;
            flex-direction: column;
            flex-basis: 100%;
            flex: 1;
        }
        .employee-left-column {
            min-height: 150px;
            height: auto;
            padding: 0px 30px 0px 0px;
            border-bottom: 3px dashed cyan;
        }
        .employee-right-column {
            min-height: 150px;
            height: auto;
            padding: 0px 0px 0px 30px;
            border-bottom: 3px dashed aqua;
        }
        .employee-img {
            width: 100%;
            height: auto;
        }

HTML
						<div class="employee-wrapper">
							<div class='employee-row'>
								<div class='employee-column'>
									<div class='employee-left-column'>
										<h2>Ben Dover</h2>
										<h3>Ben's title goes here.</h3>
										<p>Ben has more than 35 years experience.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.</p>
										<div class="employee-img">
											<img src="images/about/ben_dover.jpg" alt="Ben Dover" />
										</div>
									</div>
								</div>
								<div class='employee-column'>
									<div class='employee-right-column'>
										<h2>Ilene Dover</h2>
										<h3>Ilene's title goes here.</h3>
										<p>Ilene has more than 40 years experience.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.</p>
										<div class="employee-img">
											<img src="images/about/ilene_dover.jpg" alt="Ilene Dover" />
										</div>
									</div>
								</div>
							</div>
							<div class='employee-row'>
								<div class='employee-column'>
									<div class='employee-left-column'>
										<h2>Irene Dover</br>
										<h3>Irene's title goes here.</h3>
										<p>Irene has more than 7 years experience, primarily in Asia.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.</p>
										<div class="employee-img">
											<img src="images/about/irene_dover.jpg" alt="Irene Dover" />
										</div>
									</div>
								</div>
								<div class='employee-column'>
									<div class='employee-right-column'>
										<h2>Ima Pseudonym</h2>
										<h3>Human Resources</h3>
										<p>Ima declines to divulge anything about herself.</p>
										<div class="employee-img">
											<img src="images/about/ima_pseudonym.jpg" alt="Ima Pseudonym" />
										</div>
									</div>
								</div>
							</div>
						</div>
2

Well, go figure. I struggle for hours, finally make a post, then figure it out myself. Following are the changes I made.

In the HTML, I put the float inline with the image tag instead of the CSS, plus I moved the img tag up to the top of the employee-left-column div.

HTML
<div class="employee-img">
  <img style="float: left; padding: 0px 20px 0px 0px;" src="images/about/ben_dover.jpg" alt="Ben Dover" />
</div>

In the CSS, I removed the float instruction

CSS
.employee-row p {
  /*float: left;*/
  color: #FDFDFD;
  font-family: 'Montserrat', sans-serif;
  line-height: 131%;
  font-size: 14px;
  text-align: left;
  }
1 Like
3

That often happens :slight_smile:

Floats always have to come before the content that you want to wrap around it.

Glad you got it sorted anyway :slight_smile:

4

Floats always have to come before the content that you want to wrap around it.

Ah, so that’s the reason it works. In the end, I had just taken a snippet, put it in my page, saw that it worked, and then put my content into the snippet. I still didn’t understand why it worked. Now I do. I’ve since modified my design from what I show above - and I know why it works! Thank you.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.