Ich hoffe, der Titel drückt ungefähr aus, was ich nun seit letzte Nacht versuche, irgendwie vernünftig hin zu bekommen.
Es gelingt mir aber nicht.

Folgendes Problem:

Ich schreibe mit CSS & HTML eine einfache Webseite, deren Inhalte zentriert dargestellt werden sollen.

Die entsprechenden ids dazu sehen so aus

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#wrapper{     border:5px solid #94d1d4;     background:#fff;     padding:0px;     padding-bottom:12px;     width:650px;     margin:auto;}   #content{     padding-left:15px;     text-align:justify;     width:450px;     float:left;}   #sidebar{     padding-left:15px;     text-align:left;     width:170px;     float:left;}

Und im FF wird's ja auch zentrierrt angezeigt, aber im IE nicht. Auf diversen Webseiten und in Foren habe ich gelesen, dass "text-align:center" o.ä. abhilfe schaffen soll.
Aber hier passiert's dann immer, dass der ganze Text im Mittelachsensatz darstellt wird, was er nicht soll.

Wo ist der Fehler?


Außerdem endet der Wrapper immer scheinbar ganz willkürlich irgendwo auf der Seite (Im Forefox) und umschließt nicht die Content- und Sidebar-Layer.
Wieso?

In der HTM-Datei sieht das wie folgt aus:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="wrapper">   <img src="img/header.jpg" style="border:0px;">   <div id="content"> Inhalt </div>   <div id="sidebar"> Inhalt </div>   </div>

Könnte das was mit dem IMG-Tag zutun haben, oder woran liegt das?


Danke schon mal für Hilfe
Bonnie

Wenn das CSS für #wrapper (= margin:auto) im IE nicht funktioniert, ist ein nicht oder falsch gewählter Doctype für's HTML-Doc die Ursache - Der »DOCTYPE-Switch« und seine Auswirkungen.

Ansonsten würde text-align:center so angewendet werden , ohne den Inhalt von #wrapper horizontal zu zentrieren:

Code css:

1 2	body { text-align:center; } div#wrapper { text-align:left; }

Und zur weiteren Frage: Webmaster FAQ -> [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?