Amarek: <DIV>'s nebeneinander positionieren (float ist bekannt)

Beitrag lesen

SELF-Forum

<DIV>'s nebeneinander positionieren (float ist bekannt)

Amarek
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe ein Layout-Problem. Ich möchte eine Grafik und dazugehörigen Text nebeneinandern positionieren. Dazu habe ich die Grafik und den Text jeweils in ein eigenes <div> gepackt. Mit float habe ich dann den Text neben die Grafik bekommen, aber obwohl die Text-<div> komplett rechts neben die Grafik geschoben wurde, wird der Text innerhalb der <div> "unnötigerweise" eingerückt.

Hier mal ein Codeausschnitt mit Testdaten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<div style="position:relative;width:984px;background-color:#eee;padding-left:16px;padding-top:30px;">  
	<div style="position:static;float:left;width:141px;height:26px;">  
		<a title="test" href="http://www.test.de" target="_blank"><img src="logos/test.jpg" alt="test" width="141" height="26" border="0" /></a>  
	</div>  
  
	<div style="position:relative;left:192px;top:0px;width:765px;padding-bottom:30px;">  
		<font size="2" color="#1a4688" face="verdana"><strong>test</strong></font><br /><br />  
		<font size="2" color="#1a4688" face="verdana">test:<em><a title="test" href="http://www.test.de" target="_blank">www.test.de</a></em></font><br />  
		<p><font size="2" face="verdana"><strong>testdaten:</strong><br />  
		bla blub<br />  
		mehr bla blub<br />  
		noch mehr bla blub<br />  
		immer noch bla blub</font></p>  
		<p><font size="2" face="verdana">es nimmt kein ende mit bla blub<br />  
		noch immer bla blub<br />  
		endlich zu ende mit bla blub</font><br />  
		</p>  
		<hr />  
	</div>  
  
	<div style="position:static;float:left;">  
		<a title="test" href="http://www.test.de" target="_blank"><img src="logos/test.jpg" alt="test" width="141" height="100" border="0" /></a>  
	</div>  
  
	<div style="position:relative;left:192px;width:765px;padding-bottom:30px;border:1px solid blue;">  
		<font size="2" color="#1a4688" face="verdana"><strong>test</strong></font><br /><br />  
		<font size="2" color="#1a4688" face="verdana">test:<em><a title="test" href="http://www.test.de" target="_blank">www.test.de</a></em></font><br />  
		<p><font size="2" face="verdana"><strong>testdaten:</strong><br />  
		bla blub<br />  
		mehr bla blub<br />  
		noch mehr bla blub<br />  
		immer noch bla blub</font></p>  
		<p><font size="2" face="verdana">es nimmt kein ende mit bla blub<br />  
		noch immer bla blub<br />  
		endlich zu ende mit bla blub</font><br />  
		</p>  
		<hr />  
	</div>  
</div>

Ich muss dazu erwähnen, dass meine Erfahrung mit HTML eher beschränkt ist. Die Originaldaten stammen aus GoLive und waren total zerschossen, es grenzte an ein Wunder dass die Seite überhaupt noch dargestellt wurde (viele überflüssige Tags, die zum Teil nicht mal geschlossen wurden usw.). Ich habe jetzt mit meinem eingeschränkten HTML Wissen versucht die Seite etwas aufzuräumen, aber dieser Teil will mir nicht gelingen. Wie bekomme ich es also hin das der Text in der <div> linkbündig ausgerichtet wird und nicht auf Höhe der Grafik eingerückt wird. Ich möchte, wenn es geht, auf eine absolute Positionierung verzichten.

Der Rahmen um die untere <div> ist Absicht, damit man leichter erkennen kann was ich meine.

Beitrag melden
–
Informationen zu den Bewertungsregeln