CODEWITHSUNDEEP
htmlcss
Bender
Bender

Reputation: 87

What won't image go inside div?

I'm trying to put an image inside a div of the same dimension but for some reason the image keeps appearing to right of the div even though it's inside the div in my html:

<div>
  <img width="16" height="16"></img>
</div>

I created a JSfiddle that shows what's going on: https://jsfiddle.net/5q0s3y1j/

Can anybody help me understand how to put the image inside the div?

Upvotes: 0

Views: 593

Answers (3)

Karin
Karin

Reputation: 8610

The issue is with left: 20px; in your .userFlair css. It's telling the image to shift 20 pixels left from the start of the container, which is larger than the container itself.

Changing this to left: 0; or omitting it completely will put the image in the div.

Here's an updated fiddle.

Upvotes: 2

Yasin Yaqoobi
Yasin Yaqoobi

Reputation: 2040

You don't need to position your img separately. You can simplify your code to just this css. 

.lobbyFlair {
  border: 1px solid red;
	height: 16px;
	width: 16px;
	display: inline-block;
	position: relative;
}
<div class="lobbyFlair">
  <img class="userFlair" width="16" height="16" src='http://66.media.tumblr.com/avatar_2dde66f8a62c_16.png'/>
</div>

Upvotes: -1

Nostalg.io
Nostalg.io

Reputation: 3752

Remove the left: 20px on your image class.

.userFlair {
    position: absolute;
    bottom: 50%;
    // left: 20px;
    transform: translateY(50%);
}

See updated fiddle: https://jsfiddle.net/5q0s3y1j/2/

Upvotes: 1

Related Questions