Float: right; doesn't keep my image on the right

1

I’m trying to float an image to the right once the page hits 1024px wide. However, the image just seems to go more and more towards the center as I widen the page. Using Float: right; didn’t work, neither does using a negative right margin property. Trying to do this with just vanilla CSS.

Here’s the part of the code it’s in:
HMTL:

<div class="container">
		<div class="profile-image">
			<img src="images/responsive-layout-profile.png" alt="Student profile image">
		</div>
			<p class="tag">Hi!!</p>
		</div>

CSS:

@media screen and (min-width: 1024px) {

	.container {
		max-width: 1200px;
	}

	.main-nav {
		float: right;
		margin: 30px 20px 0 0;
	}

	.main-nav a {
		padding: 1em;
	}

	.name {
		float: left;
		padding: 1em;
	}

	.tag {
		text-align: left;	
		padding-left: 0;
		padding-top: 150px;
	}

	.profile-image {
		float: right;
	}

}
2

Can you put this in a codepen and link to it?

3

https://codepen.io/GiantGough/pen/ZJgNoV I put borders around it so you could see where the picture is supposed to be.

4

If you’re trying to make the image the farthest right-aligned element, it will need to be placed above the main-nav element in your HTML, since both are floated right.

5

You need to clear the floats before starting a new section. The header is using float for .main-nav and when you are starting a new .container without clearing the floats above, it is affecting the layout. You can add this to your css:
.container { clear: both; }

2 Likes
6

That was it!! Thank you so much!

1 Like