CSS width percentage doesn't adjust

Question

I have a container with 3 divs inside. I'm making use of the full page. So I'm busy, all percentage, and when I crop my screen, only the first div resizes.

Here's the code:

#topnews {
  margin-left: 1%;
  margin-top: 10px;
}
#topnews_bg {
  background-color: #F4F4F4;
  width: 30%;
  height: 187px;
  margin-top: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius:5px;
  overflow: hidden;
}
#container_djbanner {
  height: 187px;
  width:30%;
  top:10px;
  left: 31.7%;
  position: absolute;
}
#container_login {
  float: right;
  margin-right: 1%;
  height: 187px;
  width: 31.7% !important;
  margin-top: -187px;
  background-color: green;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

<div id="topnews">
  <div id="topnews_bg">
    <div id="slider">
      <div id="sliderContent">
        <div class="sliderTopstory" style="background: url(assets/img/top3.png);height:187px;">
          <div id="topnews_opacity">
            <span id="topnews_info">
              <b>3e bericht</b><br/>En dan hier weer iets :p
            </span>
            <a href="#">
              <div id="topnews_button">Meer info!</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="container_djbanner">
  <img src="assets/img/testdj.png" style="-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" />
</div>
<div id="container_login">
  ds
</div>

Why does only the first box resize?

Answer 1

The divs are resizing correctly, if the problem is that the image is not resizing you could fix it with this css:

#container_djbanner img{
  max-width: 100%;
}

Check out this codepen.

*Avoid using inline css in your html (is not a good practice).