✔ Probleme mit tabellenfreier Konstruktion

[nytemare]

Ok neues Problem, neues Glück

Ich habe folgenden Quelltext:

<div id="header">Header</div>
<div id="nav">Navigation</div>
<div id="content">Content</div>
<div id="footer">Footer</div>

..und dazu folgendes Stylesheet:

DIV#header {
height: 50px;
background-color: #090;
border: 2px solid #000; }
DIV#nav {
float: left;
width: 200px;
height: 400px;
background-color: #ccc;
border-style: solid;
border-color: #000;
border-width: 0px 2px 0px 2px; }
DIV#content {
float: right;
height: 400px;
background-color: #fff;
border-style: solid;
border-color: #000;
border-width: 0px 2px 0px 0px;
text-align: left; }
DIV#footer {
background-color: #090;
border: 2px solid #000;
clear: both; }

Mein Problem ist, daß in dem div-Container mit der id="content" der Text rechtsbündig ist (also als ob text-align auf "right" gesetzt wäre). Weiß jemand warum bzw. wie ich den Inhalt linksbündig bekomme?

Danke im voraus für Hilfe

 

[Gumbo]

Das liegt an dem Attribut float: right;.

Wieso nimmst du nicht einfach eine Tabelle?

 

[nytemare]

Danke - wußte nicht, daß float auch Einfluß auf die Textausrichtung hat. Ich hatte ja auch extra "text-align: left;" hinzugefügt, aber anscheinend ist float leider "stärker".

Warum keine Tabellen? Weil der Quelltext ohne Tabellen viel kleiner und übersichtlicher ist.

 

[LuvShining]

Warum keine Tabellen? Weil der Quelltext ohne Tabellen viel kleiner und übersichtlicher ist.

Das ist nicht wirklich so - die Länge und Übersichtlichkeit bleibt die selbe wenn Du auch für Tabellen CSS verwendest.

 

[Gumbo]

Ok, dann hätte ich noch eine Lösungsmöglichkeit. Setz einfach innerhalb deines "content"-Kontainers einen weiteren mit linksbündiger Ausrichtung und einer Weite von 100%.

 

[nytemare]

@gumbo

Danke für den Tip. Habe ich versucht, klappt leider auch nicht.

 

[Gumbo]

Ok, vielleicht hatte ich's etwas falsch beschrieben. Versuch dies hier:
[color="2c2c8c"]
&nbsp;&nbsp;<div id="content"><div style="background-color:#f00; width:100%; text-align:left;">Content</div></div>
[/color]

 

[nytemare]

Original geschrieben von Gumbo
Ok, vielleicht hatte ich's etwas falsch beschrieben. Versuch dies hier:
[color="2c2c8c"]
&nbsp;&nbsp;<div id="content"><div style="background-color:#f00; width:100%; text-align:left;">Content</div></div>
[/color]

Nein, nein, hatte ich schon richtig verstanden. Ich habe das genauso gemacht (zuerst ohne width: 100% weil ein div Container ja eigentlich defaultmäßig eine Weite von 100% hat - dann aber auch mit der zusätzlichen Angabe) - leider war der Text immer noch rechtsbündig.