Problem mit der Seitenbreite

the_MKay · 10. März 2009

Hi,

hier zunächst mal mein XHTML-Strict-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<title>Website Name</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div id="header">
		<p id="about">by<br />Name<br />eMail</p>
		<span id="pageLogo"></span>
		<h1 id="pageTitle">Website Name</h1>
	</div>
	<div id="navigation">navi
	</div>
	<div id="content">
		content<br />test<br />banane
		<div style="height:1px; width: 2000px;background-color:blue;"></siv>
	</div>
</body>
</html>

Dazu der CSS:

Code:

* {
	margin: 0;
	padding: 0;
}
html {
	font: 0.75em/1.3em Verdana, Arial, Helvetica, sans-serif;
}
#header {
	background-color: #a7adff;
	height: 66px;
	border-bottom: 1px solid #000;
}
#pageTitle {
	line-height: 66px;
	font-family: sans-serif;
	font-weight: normal;
	font-size: 2em;
}

#pageLogo {
	float: left;
	width: 59px;
	height: 56px;
	background-image: url('stdpl.png');
	margin: 5px 20px;
}
#about {
	float: right;
	text-align: right;
	height: 66px;
	margin-right: 20px;
	line-height: 22px;
	font-weight: bold;
	color: #46496b;
}
#navigation {
	float: left;
	width: 200px;
	background-color: red;
	border-right: 1px solid #000;
}
#content {
	background-color: green;
	margin: 10px auto auto 210px;
	width: auto;
}

Wie man sieht ergibt das ein relativ schönes "Layout", wobei der "header" über die gesamte Breite der Webseite geht. Das linke Menü ist 200px breit und die Fläche rechts daneben beinhaltet den Content.

Wenn nun der Inhalt in dem Content-Container zu breit wird (was später definitiv der Fall sein wird), dann gibt es Probleme mit der Anzeige.
Ich habe zum Testen einen 2000px-breiten blauen Div in den Content eingefügt. Dieser ragt allerdings aus dem grünen Content-Div heraus. Der grüne Content-Div nimmt scheinbar eine maximale Breite an (die des Bildschirms). Ich hätte es nun aber gerne, dass dieser Content-Div sowie der Header-Div immer über die gesamte Breite der Webseite gehen.

Weiss jemand wie ich das realisieren kann?

Gruss
the_MKay

anna55 · 10. März 2009

Gib mal dem Div header noch zusätzlich

PHP:

	position:relative;
	right: 0;

und außerdem

PHP:

html, body {
	height: 100%;
	width: 100%;
	overflow: auto;
	display: table;
}

the_MKay · 15. März 2009

Hi,

danke für deine Antwort. Das Zauberwort war wohl "display: table" ... auch wenn ich noch nicht ganz verstehe, warum es damit funktioniert o0

Jedenfalls habe ich das ganze letztendlich doch anders gelöst, da ich für Menü und Content jeweils eigene Scrollbalken brauchte (so in etwa wie bei Framesets) und noch einige andere Probleme in Bezug auf Browser übergreifende Kompatibilität aufgetreten sind.

Gruss
the_MKay

Problem mit der Seitenbreite

the_MKay

New member

anna55

Moderator

the_MKay

New member