clearing Problem bei CSS

[adw4712]

Hallo,
ich möchte rechts neben den Überschriften H3 eine Grafik mit einem Pfeil anzeigen, mit dem mann nach oben zum Seitenanfang gelangt.

Die Grafik soll auf gleicher Höhe mit H3 sein und unter H3 und der Grafik soll eine Linie (wie unterstrichen) sein.

Meine Lösung:
ein DIV-Container mit der classe=boxh3 in der ich h3 mit float=left und die Grafik mit float=right platziere. Den unteren Rand des DIV-Containers mach ich blau als Unterstreichung.


.boxh3 {
width: 490px;
color: #004890;
height: 18px;
border-bottom: 1px solid #004890;
margin: 22px 0px 18px 0px;
}

h3{
font: bold 12px Arial, Helvetica, sans-serif;
float: left;
color: #004890;
}

.upgrafik{
float: right;
}


Mein Problem:
Ohne zu clearen schiebt der Firefox den Div-Container zusammen und schrebit die Ihalte außerhalb, also unter den Container.
Aber Wie soll ich Clearen? In dem Container ist ja nichts mehr dem ich Clear-both zuweisen kann.

[Germanjosh]

Wenn die Breite des Containers sowieso fest ist, könntest du den Button auch absolut / relativ positionieren, oder?

[spickzettel]

Die Höhe von .boxh3 ist zu klein.

Code: Alles auswählen

height:auto;
overflow:hidden;

sollte funktionieren.

[Plexx]

Dein Problem ist wohl, dass du h3 und der grafik eine Breite zuweisen musst, vor allem dann wenn sich die h3 nicht in einer Zeiel ausgeht..

zum clearen am einfachsten (wenn auch nicht am schönsten) <div style="clear:both;"></div>

Anonsten google mal nach easy clearing (:after pseudoklasse)

[adw4712]

Danke für die Tipps.

:after geht nicht bei allen Browsern, aber danke für den Hinweis, kannte ich noch nicht...

Ich denke ich mach da mit dem <div style="clear:both;"></div>