3 elemente vertikal anordnen (float: left, und inline...)

[trundel]

ich würde gerne im maincontent meiner page drei elemente *edit* horizontal *edit* nebeneinander anordnen, und zwar:
div, h1, div

ich hab allerdings probleme es korrekt im firefox angezeigt zu bekommen.

wenn ich versuche allen drei elementen float: left zuzuweisen verschwinden elemente komplett, alle auf inline zu stellen bringt auch nicht den gewünschten erfolg.

was mich besher am nähesten gebracht hat war eine kombination aus floa, inline und inline block, allerdings wird es nur im explorer wie gewünscht angezeigt, firefox verschiebt das erste div etwa um ein pixel nach oben.

explorer:
http://www.funpic.de/foto/487773

firefox:
http://www.funpic.de/foto/487772

html:

Code: Alles auswählen

<div id="PreHeadline"></div>
  <h1>Home</h1>
  <div id="AfterHeadline"></div>

css:

Code: Alles auswählen

#PreHeadline {
   background-color: #B4B4B4;
   height: 21px;
   width: 100px;
   margin-top: 7px;
   float: left;
}

h1 {
   font-size: 28px;
   color: #B4B4B4;
   width: 100%;
   margin-top: 0px;
   display: inline;
}

#AfterHeadline {
   background-color: #B4B4B4;
   height: 21px;
   width: 100px;
   margin-top: 7px;
   display: inline-block;
}

die div elemente mit ner border vorzutäuschen gelingt nicht da der rahmen wesentlich größer ausfällt als die schrift selbst.

die h1 in ein div einzunesten, den hintergrund grau zu setzen und den hintergrund der h1 weiß zu setzen bringt auch nicht den gewünschten erfolg und bilder wollte ich eigentlich nicht für jede überschrift der seite basteln müssen.

wenn jemand ne lösung parat hat, oder zumindest nen workaround ( ) währ ich sehr dankbar!

[trundel]

ich möchte die 3 elemente natürlich horizontal, nicht vertikal anordnen. tut mir leid aber ich habe ums verrecken den "edit" button nicht gefunden

[Azra]

Der Edit Button befindet sich oben rechts im Inhaltsfeld deines Posts (links neben deinem Nicknamen). Die Bilder sind bloß nicht zu sehen und leider macht sich keiner die Mühe es zu ändern.

Zu deinem Problem, vielleicht hilft es wenn du dem h1 zusätzlich noch das vergibst:

Code: Alles auswählen

vertical-align:baseline;

[trundel]

Der Edit Button befindet sich oben rechts im Inhaltsfeld deines Posts (links neben deinem Nicknamen). Die Bilder sind bloß nicht zu sehen und leider macht sich keiner die Mühe es zu ändern.

Zu deinem Problem, vielleicht hilft es wenn du dem h1 zusätzlich noch das vergibst:

Code: Alles auswählen

vertical-align:baseline;

tatsache, unsichtbare edit und quote buttons ...

den h1 auf vertical-align: baseline; zu setzen wird sowohl von firefox als auch von iexplorer ignoriert, das selbe scheint für alle anderen vertical-align: formate zu gelten. es bringt auch nichts die den beiden divs ein vertical-align: baseline zu zuweisen, auch schon probiert.

komischer art und weise ist auch nur das ganz linke div, also jenes das mit "float: left;" formatiert wurde um 1 pixel nach oben verschoben, das auf der rechten seite mit "display: inline-block;" scheint auf gleicher höhe mit der h1 zu liegen.