Problem mit Text neben Div

[McFreaq]

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:

<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…

 

[rm -r *]

Hallo,
da sind ein paar Sachen.

1) Beim zweiten div fehlt beim öffnenden Tag die schliessende "Klammer" >
2) Nimm mal bei den divs jeweils das "position:relative" raus
3) Schmeiss die Angaben top und left raus und mach die Abst#nde über margin bzw. padding.
4) Der Text läuft raus, weil er ja irgendwo hinmuss
Du sagst dem div wo der Text drin ist, das es nur 200px breit ist. Also wird es so lang, wie der Text beötigt um angezeigt zu werden.
Wenn Du beim umschliessenden div die höhe rausschmeisst, bzw. furch min-height ersetzt und da noch ein overflow: auto einfügst, dann wird das div so hoch, wie der Text es benötigt.
5) Das div mit dem text mus auch float: left haben

<div style="margin-left:auto; margin-right:auto; background-color:#CCC; width:800px;overflow: auto">
<div style="float:left; background-color:#666; width:50px; height:200px">
</div>
<div style="width:200px;float: left; margin-left: 10px;">
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>

 

[McFreaq]

Yeah-Yeah!

Vielen Dank, das funktioniert.