Ausrichten über CSS am Elternbereich

Ich möchte folgendes über CSS erreichen:

Ich habe einen Gesamtbereich B1 an diesem Gesamtbereich befindet sich am oberen Rand ein Bereich, der jeweils zum Elternbereich 100px Abstand haben soll. Hierzu habe ich in HTML folgendes geschrieben:

<div class="B1"> 
  <div class="B11"></div>
  <div class="B12"></div>
</div>

und in CSS

.B1 {
  position: absolute;
  left:     20px;
  right:    20px;
  width:    100%;
}


.B11 {
  width:   100px;
  height:  100px;
  postion: relative;
  left:    0px;
  top:     0px;  
  background-image: url(file:..\test.jpg);
}


.B12 {
  position:          absolute;
  left:              0px;
  top:               0px;
  display:           block;
  width:             100%;
  height:            16px;
  padding-left:      100px;
  padding-right:     100px;
  background-color:  #FF0000;
}

Der Bereich wir auch am oberen Elternbereich plaziert, nur die Grösse erstreckt sich nicht über den gesamten des Elternfensters, sondern hat nur eine Gesamtlänge von 200px (Padding-left + Padding-right).

Wie kann ich es aber hinbekommen, dass B12 an der Breite von B1 mit jeweils einem Rand von 100px ausgerichtet wird.

Sorry, aber weist du wovon du redest?
Wenn ich abosulte rausnehmen würde, dann würde es unter E1 positioniert werden. Es soll aber am oberen Rand und mit der Breite - linker Rand - rechter Rand von E1 positioniert werden.

Sorry habe mich vertippt hier nochmal der korrekte Text:

Wenn ich abosulte rausnehmen würde, dann würde es unter B11 positioniert werden. Es soll aber am oberen Rand und mit der Breite - linker Rand - rechter Rand von B1 positioniert werden.