DIV-Layer positionieren

[jiriki]

Hi Leute,

Wie kann ich innerhalb eines HTML-p-Tags zwei div-Layer nebeneinander positionieren, sodass sie die Funktion einer unsichtbaren, 100%-breiten Tabelle haben, die aus einer Zeile und zwei Zellen besteht mit prozentual definierten Breiten?

Bisher sieht der zugehörige Container so aus:

  
<div id="content">  
  <p id="breadcrumbs" class="column_headline">  
    <a href="[..]">Home</a> > <a href="[..]">Termine</a>  
  </p>  
  [content]  
</div>  

Jetzt hätte ich ganz gerne neben dem Pfad einen Link zum Archiv, der aber im Gegensatz zum Pfad am rechten Rand des Layers "content" platziert sein soll.

Ich dachte da an zwei neue Layer innerhalb des p-Tags, die ich jeweils mit dem Attribut "float" in CSS links bzw. rechts ausrichte, also

  
<div id="content">  
  <p id="breadcrumbs" class="column_headline">  
    <div id="leftside">  
      <a href="[..]">Home</a> > <a href="[..]">Termine</a>  
    </div>  
    <div id="rightside">  
      <a href="[archivelink]">Archive</a>  
    </div>  
  </p>  
  [content]  
</div>  

und

  
#leftside div {  
  float: left;  
  width: 65%;  
}  
#rightside div {  
  float: right;  
  width: 35%;  
}  

Leider klappt es nicht. Die "column_headline"-CSS-Eigenschaften vom p-Tag werden komplett überschrieben (Hintergrundfarbe nicht mehr zu sehen, etc.) und die Layer werden auch untereinander und nicht nebeneinander gelistet.

Hat jemand ne Idee, woran's liegen könnte?

Danke und Grüße

[Steel]

Hi!

Hat jemand ne Idee, woran's liegen könnte?

Noe. Sollten sie Ueberschrieben werden, hab eich keine Ahnung.

Ich behaupte aber mal kackfrech: Die werden nicht ueberschrieben.

Zuerstmal duerfen aber divs gar nicht in einem p vorkommen. Dein Code ist nicht valide. http://de.selfhtml.org/html/referenz/elemente.htm#div

Dann eine Frage: Wieviel siehst Du von einem Element mit der Hoehe 0? Richtig. Genau das, was Du bei Deinem Experiment siehst und fuer 'ueberschreiben' haelst. Oder hast Du dem p eine Hoehe gegeben? Wenn die Inhalte von einem Element im Elementfluss sind, bestimmen sie standardmaessig dessen Dimension. Bei Dir is aber nix im Fluss, Du nimmst es raus.

Informier dich doch mal ueber mehrspaltige Layouts mit CSS. http://de.selfhtml.org/css/layouts/mehrspaltige.htm

[jiriki]

Informier dich doch mal ueber mehrspaltige Layouts mit CSS. http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Der Tipp war gut. Habe aus dem HTML-Teil jetzt den p-Tag rausgenommen und im CSS anstelle des float: right im .rightside dort einfach ein margin-left gesetzt, dass die Breite des .leftside hat. Also im Sinne von

  
#leftside div {  
  float: left;  
  width: 400px;  
}  
#rightside div {  
  margin: 0 0 0 400px;  
}  

Jetzt klappts wunderbar.

Danke.