html.de - Überlagerung zweier sections

by SpiceLab

HTML

<section class="blubb">
    <div class="rowa clearfix">
    <div class="header-col-2-3">

      <img id="bild"src="http://cdn1.mydays.com/de/gallery/f7cf211bz181f-2dd4-5db1-8b93d7144982/candle-light-dinner.jpg">

    </div>
      <div class="header-col-1-3">
        <h2>
          Kampagnen
        </h2>
        <p>
          <strong>Wir informieren Sie über die aktuellen Kampagnen in den Themenwelten   "Hausbank" und "Geld fürs Leben". </strong>
        </p> 
      </div>
    </div>
  
 </section>

  <section class="hauptartikel">
    <div id="icons-right">
      icon1
      icon2
    </div>
    <div id="hauptartikel-left">
      <h2>
        Aktuell und wichtig
      </h2>
      <a href="#" style="padding-left: 30px;">Neues Jahr, neues Layout</a>
      <a href="#">Neue Lotto</a>
      <a href="#">Neues Kunden</a>
      <a href="#">Neues Vertrieb ab 2016</a>
      <a href="#">weiterhin gilt...</a>
    </div>
  </section>

CSS

.hauptartikel {
  background-color: red;
  color: white;
  position:relative;
  padding-bottom: 10px;
  width: 100%;
  padding-top: 10px;
  border: solid 1px black;
}

.hauptartikel #icons-right {
  text-align: right; 
  padding-right: 40px;
}

.hauptartikel #hauptartikel-left h2 { 
  color: white;
  padding-left: 40px;
  text-align:center;

}


.hauptartikel #hauptartikel-left a {
  text-align: left;
  display: inline-block;
  padding-left: 15px;
  color: white; 
  text-decoration: none;
  display: none;
  font-size: 90%
}

 .blubb #bild {
  max-width: 100%; 
  max-height: auto;
}


.blubb {
  border: solid 1px black; 
  top:0;
  left:0;
  width: 100%;
  height: auto;
  /*margin-bottom: -40px;*/ /* zu Demonstrationszwecken auskommentiert */
}

.header-col-1-3 {
  margin-left:1%;
  padding-right:10%;
  text-align: center;
  display:none;
}


 .header-col-1-3 h2{
  margin-top:5%;
  color: red;
}

 .header-col-1-3-header a {
   margin-top: 30px;
   margin-right: 20px;
   float:right;
   color: red;
}


*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.rowa {
  margin: 0 auto 0px;
  
}
.row:last-child {
}

[class*="header-col-"] {
  position: relative;
  padding-left: 5%;
  padding-right: 5%;
}