Responsive Design: Hintergrund passt sich nicht an, wenn nicht mit Text gefüllt

[hegi108]

Guten Tag

Auf der "problematischen Seite" sollte der Titel in einem eigen Balken mit Abstand zum ersten Kapitel sein. Es sollte also aussehen wie auf http://shiatsu-bewegung.ch/shiatsu.php (wobei, wie man sieht, auch auf dieser Seite diese Titelzeile nicht funktioniert, denn sie ist identisch aufgebaut, aber noch mit einem leeren gif <img src="images/leer1x1.gif" width="625" height="1"> verlängert. Das ist jedoch keine Lösung, da der text vom Besitzer der Seite selber eingegeben werden kann. Zusätzlich bricht die Zeile so auf kleineren Displays nicht um, was ja die Voraussetzung für responsive Design wäre!)

Hier der dazugehörige CSS-Code:

#body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/lindenblatt.jpg) no-repeat center fixed;
	-moz-background-size: cover;
	background-size: cover;
	margin: 0px auto;
	padding: 0px;
	max-width:1100px;
	height:100%;
	/* */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  /* */
}

Content enthält den Header (hier nicht gezeigt) mit dem fixen Menu und dem darunter scrollenden Hauptteil.

#content {
	position: relative;
    max-width: 1080px;
    min-width: 200px;
	margin:0 auto;
}

#haupt {
	position: relative;
	float:left;
    width: 100%;
	z-index: 3;
	padding-top: 110px;
	padding-bottom:20px;
}

Die Box mit hellem Hintergrund:

#.box {
	position:static;
	float:left;
	min-width:200px;
	max-width:1080px; 
	z-index: 3;
	padding-top:20px;
	padding-left:50px;
	padding-right:50px;
	padding-bottom:0px;
	background:rgba(255,255,255,0.7);
}

#.boxinb {
	white-space:normal;
	float:left;
	position:relative;
	min-width:200px;
  max-width: 100%;
	max-width:960px; 
	margin-bottom: 15px;
}

Die Box ohne Hintergrund, ergibt die Zwischenräume:

#.zwr {
	position:static;
	float:left;
	max-width:1080px; 
	min-width:200px;
	z-index: 3;
	padding-top:20px;
	background:rgba(255,255,255,0);
}

#.titel {
    font-family: mistral;
    font-size: 2em;
    font-weight: 500;
    color: #BDA10A;
}

und hier der HTML-Code:

  <div id="haupt">

    <div class="box">
      <div class="boxinb">
		    <div class="titel">
          <?php webyep_shortText("Titel", false); // WebYepV1 ?>
        </div>
      </div>
    </div>
    <div class="zwr">
    </div>
            
    <div class="box">
....usw...

Hat jemand eine Lösung?

Vielen Dank zum Voraus

hegi108