zweispaltiges Layout vierspaltig machen

[Linuchs]

Hallo,

auf einem Inhaltsverzeichnis (Deckblatt) reicht die A4-Höhe nicht mehr aus.

Der bisher zweispaltige Text (links) und Seitenzahl (rechts) soll per CSS vierspaltig werden:

HTML:

<div class=inhalt>  
  <h3>Feiern</h3>  
  <p><a href="hofbraeuhaus.htm">In München steht ein Hofbräuhaus</a></p><p><a href="#lied_25">25</a></p>  
  <p><a href="so_ein_tag_so_wunderschoen.htm">So ein Tag, so wunderschön wie heute</a></p><p><a href="#lied_29">29</a></p>  
</div>  
  
<div class=inhalt>  
  <h3>Im Hafen und auf See</h3>  
  <p><a href="auf_der_reeperbahn.htm">Auf der Reeperbahn</a></p><p><a href="#lied_26">26</a></p>  
  <p><a href="heut_geht_es_an_bord.htm">Heut geht es an Bord (hell die Gläser klingen)</a></p><p><a href="#lied_29">29</a></p>  
  <p><a href="schoen_ist_die_liebe_im_hafen.htm">Schön ist die Liebe im Hafen</a></p><p><a class=neu href="#lied_27">27</a></p>  
  <p><a href="ueber_uns_der_blaue_himmel.htm">Über uns der blaue Himmel</a></p><p><a class=neu href="#lied_28">28</a></p>  
  <p><a href="wir_lagen_vor_madagaskar.htm">Wir lagen vor Madagaskar</a></p><p><a href="#lied_24">24</a></p>  
</div>  

zugehöriges CSS (schon auf 50% Seitenbreite reduziert):

div.inhalt p:nth-of-type(2n+1) { /* Spalte 1/4 */  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(2n+2) { /* Spalte 2/2 */  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  

so sieht es aus:

neues CSS:

  
div.inhalt p:nth-of-type(4n+1) { /* Spalte 1/4 */  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(4n+2) { /* Spalte 2/4 */  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  
div.inhalt p:nth-of-type(4n+3) { /* Spalte 3/4 */  
  margin-left: 51%;  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(4n+4) { /* Spalte 4/4 */  
  margin-left: 51%;  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  

so sieht es aus:

Der "richtige" Übergang von Spalte 2 zu 3 ist mir nicht klar. So geht's nicht: Spalte 2 mit width:49%; float:right.

Linuchs