Hi Leute
Ich möchte gerne ein 2-spaltiges Layout mit Divs umsetzen. Links möchte ich einen senkrechten Balken in einer bestimmten Farbe und daneben eine Spalte in der Text steht. Leider klappt das nicht so wie gewünscht und ich komm einfach nicht drauf was ich falsch mache.
Aufbau:
Ein Container-Div, das zentriert ist
darin
ein farbig gefülltes Div, float:left
und
ein Div mit Text
hier der betreffende Code:
Mit diesem Code habe ich 3 Probleme:
1. liegt der Text einfach über meinem grauen Balken, er sollte rechts daneben stehen.
2. läuft der Text unten AUS dem umgebenden Div hinaus, das Div sollte sich aber entsprechend nach unten fortsetzen weil es ja Hintergrund für den Text sein soll
3. ist der Text am Anfang um die Breite des grauen Balkens eingerückt, ich hätte gern dass der Text eine einheitliche Kante links hat
hier noch 2 Bilder wie es ist und wie es sein soll:
FALSCH:
RICHTIG:
Bitte erleuchtet mich…
Ich möchte gerne ein 2-spaltiges Layout mit Divs umsetzen. Links möchte ich einen senkrechten Balken in einer bestimmten Farbe und daneben eine Spalte in der Text steht. Leider klappt das nicht so wie gewünscht und ich komm einfach nicht drauf was ich falsch mache.
Aufbau:
Ein Container-Div, das zentriert ist
darin
ein farbig gefülltes Div, float:left
und
ein Div mit Text
hier der betreffende Code:
HTML:
<div style="position:relative; margin-left:auto; margin-right:auto; background-color:#CCC; width:800px; height:500px;">
<div style="position:relative; float:left; top:30px; left:100px; background-color:#666; width:50px; height:200px;"
</div>
<div style="position:relative; top:30px; width:200px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue.
Lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.
Iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.
</div>
</div>
Mit diesem Code habe ich 3 Probleme:
1. liegt der Text einfach über meinem grauen Balken, er sollte rechts daneben stehen.
2. läuft der Text unten AUS dem umgebenden Div hinaus, das Div sollte sich aber entsprechend nach unten fortsetzen weil es ja Hintergrund für den Text sein soll
3. ist der Text am Anfang um die Breite des grauen Balkens eingerückt, ich hätte gern dass der Text eine einheitliche Kante links hat
hier noch 2 Bilder wie es ist und wie es sein soll:
FALSCH:
RICHTIG:
Bitte erleuchtet mich…