Bisher habe ich in eimem container (div) eine Überschrift und darunter eine Liste. Die Liste ist mit links mit Außenabstand versehen (em), damit sie zur Überschrift etwah rechtsbündig abschließt. Dadurch ist links von der Liste ein freier Bereich. Den Platz will ich nutzen um zu jedem Listeneintrag eine Infobox einzublenden.
Momentan habe ich dazu ein links flotendes div mit fester Breite (em) in dem ich mittels innerHTML Text einblende. Mancher Text ist länger als die Liste, wodurch er über den container ragt.
Ich stelle gleich was online, nach dem Mittagessen.
Ich habe es reduziert und einiges farblich hervorgehoben. Das Worum es geht, ist der Bereich mit blauem Hintergrund (im Quelltext das letzte div mit der Klasse "maincell"), den Listenelementen und der Infobox darin habe ich einen roten Rahmen gegeben.
http://www.zwobotsgeist.de/test/test.html
http://www.zwobotsgeist.de/test/css.css
Meine Idee war ja nun, die Infobox immer ihren Inhalt einnehmen zu lassen, sie aber nur bei Bedarf sichtbar zu machen. Da es aber mehrere Infoboxen an der selben Stelle sind, frage ich mich, ob das überhaupt geht.
Zur Erklärung noch mal. Die Seite soll nicht länger werden, wenn eine Infobox eingeblendet wird (die Box soll aber nicht abgschnitten werden o.ä.). Ich weiß nicht wie viel Platz ich für die Box benötige, je nach Zoom-Stufe, Schriftart, Inhalt und Beite, können auch verschiedene Boxen die längste Box sein.
PS.:
- Wenn ich mit der zweiten Variante (innerHTML=) einem div einen Inhalt verpasse, dann wird ein äußeres div (mit Hintergrundbild und -farbe) nicht mit vergrößert und der Text ragt ggf. darüber hinaus.
Das mit dem Darüberhinausragen, hat nichts mit dem hier diskutierten zu tun, das liegt wohl am float.