Portfolio Page - Stop Text Wrapping Under Image

1

Hello,

I’m working on my portfolio page and I have run into an issue that I’m having trouble fixing.

In my about section, I’d like to have my image to the left and text to the right. I’ve gotten that part, however, after the first line my text is wrapping under the image instead of to the right of it. I’ve tried floating the image (which makes it end up in a different part of the page), editing the text’s style (for example overflow:hidden), and nesting it inside a new div, but it is still wrapping underneath.

Here is a link to my page: http://codepen.io/abigailb/pen/rWOKQx?editors=1100

Here is the div in question:

  <div>
<p><img id="profile-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/005/048/272/1774d91.jpg" alt="Photo of Abby" > Abigail Beets is a recent Computer Science graduate and technology enthusiast with a passion for continuous learning and improvement. Skills include Python, Java, HTML5, CSS, SQL, and MongoDB.</p>
<hr style="border: none; height: 1px; color: #672F79; background: #672F79; width: 80%;"/> 
<span>Application Development - Full Stack Web Development - Data Analytics</span>
  </div>

I’m not new to coding, just to HTML and CSS, but this is throwing me for a loop. Any help is appreciated. Thanks!

2

did you try using a div in a div with a class =col-md-x …
then your text doesn’t have to float, it’ll just stay in the next column.

greets,

1 Like
3

I forked your pen and made changes to it. Using bootstrap and some css. Check the linkhttps://codepen.io/hishighness/pen/JbWyQE

1 Like
4

Thank you! This was very helpful. I can see what you did and read to understand :slight_smile: I appreciate it!

5

It was a pleasure :slight_smile: ;