✔ CSS: 3 Spalten: Breite des Content-bereichs

[quirk]

Hallo zusammen,

ich sitze schon seit mehreren Tagen an einem Problem, habe schon extrem viele Tutorials angesehen und Forenbeiträge gelesen, aber irgendwie scheine ich nicht nach den richtigen Stichworten zu suchen.

Zu meinem Problem:
Ich möchte eine Webseite mit einem Header, 3 Spalten und einem Footer erstellen.
Dazu habe ich folgenden Aufbau gewählt:

<div id="wrap">
		<div id="header">
                        </div>
		
	            <div id="sidebar">
		</div>
			
		<div id="sidebar-2">
                        </div>
	
		<div id="content">
		</div>

		<div id="footer">
		</div>		
</div>
<!--end of wrap -->

Und hier die css:

#wrap {
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: 50px;
	margin-right: 50px;
	background: #FFFFFF;
}

#content {
	padding: 0;
	margin-left:180px;
	margin-right:180px;
}

#sidebar {
	float:left;
	width: 170px;
	margin: 0;
	padding: 0;
}

#sidebar-2 {
	float:right;
	width: 170px;
	margin: 0;
	padding: 0;
}

Es funktioniert auch alles prima bis auf eine nicht unerhebliche Kleinigkeit:

Wenn ich beispielsweise im Content-bereich eine Tabelle anzeigen lasse, die breiter ist, als der der Bereich zulässt, wird sie über den Rand hinaus geschrieben.
Die Eigenschaft overflow möchte ich nicht benutzen. Der Content-bereich soll sich aber der Breite des Inhalts anpassen, wenn dieser breiter ist.

Zusätlich kommt noch ein Problem mit dem Internet Explorer hinzu. Wenn ich eine Tabelle in den Content-bereich mit width="100%" setze, wird dieser unheimlich vergrößert, sodass er weit über den wrap hinaus geht.

Ich hoffe mir kann jemand helfen

 

[Dörti.Hermi]

Hi,

also warum die Tabelle über den content-Bereich hinausgeht, kann ich dir leider nicht sagen. hab alles mögliche ausprobiert. Vlt. fällt mir ja noch was ein.
Aber zum Problem im IE: Ich denke, dass dieser das Attribut width=100%; auf die Bildschirmbreite bezieht und nicht auf die Breite des übergeordneten Elements.

Lg

 

[Maik]

Hi,

wenn die mittlere Spalte sich bei einem zu breiten Inhalt nicht über die rechte Spalte legen, sondern diese nach rechts "verschieben" soll, müsste für das DIV #wrap eine (Mindest)Breite deklariert werden, die über der voreingestellten "100%"-Breite liegt.

Das hätte aber wiederum zur Folge, dass die rechte Spalte dann zu weit rechts ausgerichtet wird, wenn der Inhalt der mittleren Spalte die vorgegebene Breite im Anzeigebereich des Elements nicht benötigt.

 

[quirk]

Danke schonmal für die schnellen antworten

Hi,
Aber zum Problem im IE: Ich denke, dass dieser das Attribut width=100%; auf die Bildschirmbreite bezieht und nicht auf die Breite des übergeordneten Elements.

Mh, das könnte sein. Gibt es denn eine Möglichkeit das irgendwie zu umgehen?

wenn die mittlere Spalte sich bei einem zu breiten Inhalt nicht über die rechte Spalte legen, sondern diese nach rechts "verschieben" soll, müsste für das DIV #wrap eine (Mindest)Breite deklariert werden, die über der voreingestellten "100%"-Breite liegt.

Das hätte aber wiederum zur Folge, dass die rechte Spalte dann zu weit rechts ausgerichtet wird, wenn der Inhalt der mittleren Spalte die vorgegebene Breite im Anzeigebereich des Elements nicht benötigt.

Und das ist das Problem.

Ich hätte gerne, dass des Content-bereich eine Minimalbreite hat, die ja im Normalfall durch die margin-Eigenschaft des wrap und des Content-bereichs abhängig von der Bildschirmbreite festgelegt wird. Wenn der Inhalt breiter ist, ein großes Bild oder eine Tabelle, dann soll der Content-bereich soweit vergrößert werden, dass alles ohne Scrollbalken im <div> angezeigt werden kann. Die rechte Sidebar soll natürlich dann auch nach rechts verschoben werden.

Geht das überhaupt mit meinem Ansatz oder müsste ich das ganz anders aufziehen?

 

[Maik]

Hi,

da die Blockelemente als Voreinstellung eine Breite von 100% einnehmen, die sich auf den verfügbaren Platz innerhalb des übergeordneten Elements bezieht, und dies aus der Sicht des Elements #wrap der horizontale Anzeigebereich des Browserfensters ist, müsste für es eine Breite eingerichtet werden, die größer als 100% ist, damit sich die rechte Spalte überhaupt nach rechts (außerhalb des sichtbaren Bereichs des Dokumentkörpers / Viewports) verschieben lässt. Ansonsten legt sich, wie in deinem Fall, der Inhalt der mittleren Spalte über sie, oder die rechte Spalte wird nach unten umgebrochen.

 

[Dörti.Hermi]

Wenn die Rechte Spalte nach außen gerückt werden soll und die Breite des wrap-divs schon auf 100% gesetzt ist, wird es sich nicht vermeiden lassen, einen horizonatalen Scrollbalken anzeigen zu lassen.
Anders wäre es, wenn die Seite von Haus aus nicht 100% wäre, sondern etwas kleiner, dass würde kein Scrollbalken entstehen, aber der Inhalt des Contentbereichs würde wieder überstehen.
Also müsstest du, wie schon Maik gesagt hat, das wrap-div größer machen, aber dafür sorgen, dass die rechte spalte sich am rechten Rand des content-Bereich ausrichtet und nicht am rechten Rand des wrap-divs mit "float:right"...
Meiner Meinung sollte das dann funktionieren

LG

 

[quirk]

Ok, vielen Dank!
Es hat mit ein bisschen Fummelarbeit funktioniert