Mauricio Andrés Mauricio Andrés - 1 month ago 7
CSS Question

how to stop div from overlap to image?

I have a problem with a div and images, they're overlpaing even when there is content inside the div, here is my code

I'm using bootstrap for the grid system

This picture shows the problem:
Div and img overlpaing

Problem with JSFiddle



.news-section {
height: 500px;
background-color: #F1EFEF;
}
.news-title {
margin-top: 50px;
height: 60px;
background-color: #4A90E2;
display: inline-block;
text-align: center;

}
.news-title > h3 {
vertical-align: middle;

}
.videos-title {
margin-top: 50px;
height: 60px;

background-color: #3F444A;
color: #fff;
display: inline-block;
text-align: center;
}
.videos-title > h3 {
vertical-align: middle;
}
.news-content {
margin-top: 25px;
display: inline-block;
}
.videos-content {
margin-top: 25px;
display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="news-section">
<div class="col-md-6 col-xs-12 news-title">
<h3>Lo más nuevo</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
<div class="col-md-6 col-xs-12 videos-title">
<h3>Nuestros videos más nuevos</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
</div>
</div>
</div>
</section>




GvM GvM
Answer

check this fiddle

<section>
  <div class="container">
    <div class="row">
      <div class="news-section">
        <div class="col-md-6 col-xs-12">
          <h3 class=" news-title">Lo más nuevo</h3>
          <div class="news-content">
            <img class="img-responsive" src="http://placehold.it/500x400" alt="">
          </div>
        </div>
        <div class="col-md-6 col-xs-12">
          <h3 class="videos-title">Nuestros videos más nuevos</h3>
          <div class="news-content">
            <img class="img-responsive" src="http://placehold.it/500x400" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

  .news-section {
    background-color: #F1EFEF;
  }

  .news-title {
    margin-top: 50px;
    height: 60px;
    background-color: #4A90E2;
    display: inline-block;
    text-align: center;
    width: 100%;
  }

  .news-title > h3 {
    vertical-align: middle;
  }

  .videos-title {
    margin-top: 50px;
    height: 60px;
    width: 100%;
    background-color: #3F444A;
    color: #fff;
    display: inline-block;
    text-align: center;
  }

  .videos-title > h3 {
    vertical-align: middle;
  }

  .news-content {
    margin-top: 25px;
    display: block;
  }

  .news-content img {
    margin: auto;
  }