Dina: Seitenlayout mit Prince

Beitrag lesen

So, jetzt habe ich es geschafft, dass es wie im Beispiel ausschaut.
Mein CSS:
@page :right {
 @left {  /*Festlegung des grauen Kastens auf der rechten Seite*/
  content: counter(h1);
  border: 1px solid grey;
  background-color: grey;
  margin-right: 40px;
  color: white;
  font-size: 400%;
  font-weight: bold;
  margin-bottom: 700px;
 }
  @bottom-left {
    content: counter(page);
  }
}

@page :left {
 @right { /*Festlegung des grauen Kastens auf der linken Seite*/
  content: counter(h1);
  border: 1px solid grey;
  background-color: grey;
  margin-left: 40px;
  color: white;
  font-size: 400%;
  font-weight: bold;
  margin-bottom: 700px;
 }
  @bottom-right {
    content: counter(page);
  }
}

h1 {
 string-set: doctitle content();
 counter-increment: h1;  /*muss hinzugefügt werden, damit grauer Kasten bei 1 anfängt zu zählen*/
 border-bottom: solid black thin;
 line-height: 2;
}

Nun ist aber mein nächstes Problem, dass ich es so eingerichtet haben möchte, dass er ebenfalls, wenn ein neues <h1> kommt, er die graue Box um ein Stück nach unten setzt.
Wie kann ich das am besten umsetzen?

Hoffe, einer von euch kann mir diesmal helfen!