✔ Umfluß verhindern

[Sprint]

Hallo,

trotz stundenlangen Probieren will sich ein eigentlich banales Problem leider nicht lösen. Im Content Bereich kann auf manchen Seiten eine Auswahlliste eingeblendet werden. Der eigentliche Content umfließt den Bereich auch so, wie er soll, nur soll genau das verhindert werden. Also habe ich einen weiteren Container rechts daneben gesetzt. So wie es jetzt hier steht, werden Die Boxen im Safari und FF richtig nebeneinander gestellt. Opera und IE stapeln die beiden Boxen, was wiederum zu einem ungewollten umfließen führt. Stelle ich hingegen den Textrahmen auf absolut und gebe ihm einen entsprechend breiten linken Innenrand, wird die Höhe der umgebenden "contbox" nicht mehr angepaßt und der Inhalt läuft über den unteren Rand hinaus.

		<div id="wrapper">
			<div id="header">
			</div>
			<?php include("../includes/menu.html") ?>
			<div id="contbox">
				<div id="titelliste">
					<ul class="tliste">
<?php
foreach ($artliste as $wert){
	echo '<li><a href="aktuell.php?art='.$wert[zeit].'" onfocus="if(this.blur)this.blur()">'.$wert[titel].'</a></li>';
}
?>
					</ul>
				</div>
				<div id="textrahmen">
					<?php echo $artikel[text]; ?>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="footer"></div>

#contbox { font-size: 12px; line-height: 130%; position: absolute; width:970px; height: auto; z-index: 1; float: left; padding-top: 10px; padding-right: 10px; padding-left: 5px; border: solid 1px purple; }
#titelliste { background-color: white; position: relative; width: 200px; height: auto; float: left; margin-right: 20px; margin-bottom: 30px; padding: 5px; border: solid 1px gray; -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; }
#textrahmen { font-size: 12px; line-height: 130%; position: relative; z-index: 1; margin: 10px; width: auto; height: auto; min-height: 200px; border: solid 1px aqua; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 30px; -webkit-column-gap: 30px; }
div.clear { clear: both; font-size: 1px; }

Was muß ich machen, daß beide Boxen nebeneinander stehen und trotzdem die umgebende Höhe angepaßt wird? Bin mir sicher, daß das nur eine Kleinigkeit ist, aber ich komme ums Verr... nicht drauf.

Viele Grüße,
Sprint

 

[Maik]

Hi,

wenn ich jetzt alles richtig verstanden habe, müsste für #textrahmen ein der linken Spaltenbreite (#titelliste) entsprechender linker Außenabstand definiert werden:

#textrahmen { font-size: 12px; line-height: 130%; position: relative; z-index: 1; margin: 10px 10px 10px 240px; width: auto; height: auto; min-height: 200px; border: solid 1px aqua; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 30px; -webkit-column-gap: 30px;   }

Gut möglich, dass du im Gegenzug die CSS3-Angaben zum "Multi-column Layout" entfernen mußt, damit es in FF und Safari weiterhin korrekt angezeigt wird.

mfg Maik

 

[Sprint]

Hi Maik,

wie ich gesagt habe, nur eine Kleinigkeit. Ich hatte es auch mit Innenabstand probiert, aber auch das funktionierte nicht so, wie es sollte. Ich mußte dem Textrahmen nur eine feste Breite statt "auto" geben, dann paßte auch die Spaltendarstellung bei FF und Safari wieder.
Vielen Dank für die schnelle Hilfe.