1

I'm having a problem that once I use jQuery's .html() to insert a paragraph into a nested div. It's causing it to float outside of it's containing div. I've tried playing with the margins and padding of both divs but to no avail. I'm new to javascript/jQuery and would really like to understand why this is happening. Thanks for the help in advance.

Here's a screenshot link:

enter image description here

Here's my html: 

<div class="selectHero">
  <div id="ironMan"></div>
  <div id="capAmerica"></div>
  <div id="thor"></div>
  <div id="winterSoldier"></div>
</div>

Here's my javascript: 

$('#ironMan').html("<p>IronMan</p>"+"<p> health: "+ironMan.health+"</p>");

Here's my css: 

.selectHero {
  max-height: 250px;
  max-width: 900px;
}

#ironMan {
  background-image: url("../images/ironMan.jpg");
  background-size: cover;
  height: 200px;
  width: 200px;
  display: inline-block;
  text-align: center;
  color: white;
  font-size: 26px;
}
Ajay2707
  • 5,690
  • 6
  • 40
  • 58
Lance Martin
  • 103
  • 1
  • 7
  • please add into jsfiddle. as per your HTML its not clear to understand. You can check your display property to inline-block to other via firebug – Ajay2707 May 16 '16 at 04:46

1 Answers1

0

Try using background-size property. I guess similar question is posted here -

Fit background image to div

Community
  • 1
  • 1
Shashank Trivedi
  • 232
  • 2
  • 16