Hallo,
ich habe in einem html-Dokument folgende Struktur:
========
…
…
ueberschrift
…
========
Über css (s.u.) sind „leftcolumn“ und „rightcolumn“ per float so positioniert, dass der „content“ mit „inhalt“ zwischen beiden Spalten landet:
========
#leftcolumn {
width: 15em;
float: left;
margin-right: .5em;
}
#rightcolumn {
width: 15em;
float: right;
margin-left: .5em;
}
#content {
min-width: 20em;
}
#inhalt {
padding: 0 1.25em;
}
#inhalt h2 {
border-top: 2px solid #003560;
}
content/inhalt ist also die Spalte in der Mitte, in der mein Seiteninhalt stehen soll.
Mein Problem ist nun, dass im Firefox (3.5) die obere Line der Überschrift „#inhalt h2“ breiter ist als die tatsächliche Überschrift, da „content“ und „inhalt“ (versteckt) über die volle Fensterbreite gehen, während der Text durch die beiden "column"s begrenzt wird. Beim Internet Explorer wird „content/inhalt“ als Box so begrenzt, dass die Linie stimmt.
Kann man der Überschrift sagen, dass ihr Rahmen genau so breit wird, wie sie für ihren Text Platz hat?
display:inline (oder inline-block) für die h2 geht nur bedingt, weil die Linie dann zu kurz ist. Die Linie soll aber den vollen Verfügbaren Platz einnehmen, ohne in die „leftcolumn“ und die „rightcolumn“ hineinzuragen.
Die div-Struktur soll nach einer Vorgabe so bleiben. Positionierung der div’s mit „position:absolute“ wäre schlecht, denn die angegebene div’s stecken in einem weiteren div, das sich wegen seiner Hintergrundfarbe mit vergrößern soll. (Es sei denn, mir fehlt grad eine Info, wie man das trotzdem hinbekommt.)
Danke für Tipps.
A