Text and Image Formatting Help


I’m attempting the Personal Portfolio Webpage Project and need some help formatting the resume section, see the codepen link below. In the “Education” block, the formatting is seemingly fine but when you shrink the display size it looks whack. What I’d like is to have the icon remain floating in the top right corner and have the heading text wrap around it. The other text should sit right below the heading.


I think this may be what you’re looking for?
I put the img element first inside the box-header div, then moved the closing div tag after the h2 element to encompass the contents div. My apologies for the formatting below. Great looking portfolio, by the way.

Also would like to add that your hamburger bar could be set to max-width: 660px, to prevent the navbar from expanding south over your content.

<div class="box-header"> <img class="icon" src="https://www.rit.edu/marketing/brandportal/images/717/toolkits/logo/athletics-head-primary.jpg"><h2>Rochester Institute of Technology</h2>
<div class="contents"> <p><i>Sept 2016 - Present</i></p><p><i>Bachelor of Science in Electrical Engineering - (3.60/4.00)</i></p> </div></div>

Thanks JP, that’s sort of what I’m looking for. Except now with a larger display the tiger icon sits off to the left a bit. I want it to remain in the top right corner the whole time.

My apologies, I don’t understand. On my screen it’s sitting in the upper right hand corner of the box-header div.
I can change the screen size and it stays in the same place.

It looks like you still have the closing div after H2 and it shouldn’t be there. It needs to be moved to after the closing tag on on your contents Div

That was it, I had the closing div in the wrong place. Thanks so much.

No problem! Enjoy the rest of your day.