Search code examples
csshtmlhtml5boilerplate

CSS properties don't work in child diff

I made a parent DIV and a child DIV, the child DIV don't center and the width also don't work. As well when I add a IMG in the child DIV,the properties also don't work.

Ex:

HTML:

<div id="parent">
 <div id="child">
  <img id="big" .. />
 </div>

</div>

CSS:

#parent {
  background: #999;
  margin: auto;
  width: 100%;

}

#parent #child {
  width: 80%;
  margin: auto;
  text-align: center;
}

#big {
  display: inline;
  max-width: 100%;
  margin: auto;
}

(I made the test-site with the HTML5 Boilerplate http://html5boilerplate.com/ and is responsive)

I spent hours for solve this but no results :-(

Solution

  • Use Classes.

    <div id="parent">
 <div class="child">
  <img id="big" .. />
 </div>
</div>

#parent {
  background: #999;
  margin: auto;
  width: 100%;

}

.child {
  width: 80%;
  margin: auto;
  text-align: center;
}

#big {
  display: inline;
  max-width: 100%;
  margin: auto;
}