2 Col Seite auf Bildschirmbreite ausweiten - Wie?

blackshadow3

Grünschnabel
Hallo ihr lieben,

ich google mich nun schon seit einer ganzen Weile durchs Web, und suche entweder nach den falschen Begriffen, oder es ist schlichtweg nicht möglich. Zumindest bin ich bisher nicht fündig geworden.

Zur Sache: Was habe ich vor? Unzwar ich wollte eine Webseite auf Div-Basis aufbauen und dabei keine feste Breite sondern die volle Breite des Bildschirms nutzen. Dazu habe ich zwei Divs für mein Banner, eines für mein Menü und eines für den Inhalt. Das für das Menü soll eine fixe Breite von 160px haben und das für den Inhalt soll bis zum Ende des Bildschirms ausgeweitet werden. Dazu habe ich bisher folgenden Code:

Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="style.css"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="SHORTCUT ICON" href="gfx/favicon.ico" />
		<title></title>
		<style type="text/css">
			body {
				background: #f6f6f6;
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				font-family: sans-serif;
				font-size: 1em;
			}

			#cube {
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 160px;
				height: 167px;
				background-image: url(gfx/cube.jpg);
			}

			#menu {
				display: block;
				position: absolute;
				top: 167px;
				left: 0px;
				width: 160px;
			}

			#banner {
				display: block;
				position: absolute;
				top: 0px;
				left: 160px;
				width: 643px;
				height: 147px;
				background-image: url(gfx/banner.jpg);
			}

			#site {
				display: block;
				position: absolute;
				width: 100%;
				top: 147px;
				left: 160px;
				background: #ffffff;
				border: solid 1px #a7d7f9;
				border-right: solid 0px #ffffff;
				float: left;
				overflow:auto;
			}
		</style>
	</head>
	<body>
		<div id="cube" />
		<div id="menu">
			%Menü%
		</div>
		<div id="banner" />
		<div id="site">
			<table width="100%">
				<tr>
					<td>
						%Inhalt%
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Mein Problem hierbei ist es nun, dass sich #site nur bis zur max. Breite des Banners ausweitet. Alle Möglichkeiten die ich bisher sonst gefunden habe führen dazu, dass #site über den Bildschirmrand (meist exakt um 160 Pixel wie das Menü) hinausragt. Hat dazu vielleicht jemand eine Idee?

Ein Beispiel dazu wie es dann aussehen könnte wäre Wikipedia, abgesehen davon dass dort das Banner fehlt. Allerdings ist Wikipedia wiederum so komplex aufgebaut, dass man da auf die Schnelle nicht durchsteigt.

Vielen Dank schonmal im Voraus

Gruß

BS

PS: Ich arbeite leider nicht all zu häufig mit HTML und CSS, deshalb fehlt mir da etwas die Erfahrung.
 
Zuletzt bearbeitet:
CSS:
#site {
    display: block;
    position: absolute;
    /*width: 100%;*/ /* entfällt */
    top: 147px;
    right: 0; /* Position vom rechten Dokument-/Fensterrand */
    left: 160px;
    background: #ffffff;
    border: solid 1px #a7d7f9;
    border-right: solid 0px #ffffff;
    float: left;
    overflow:auto;
}
 
Das liegt an der falschen Schreibweise deines HTML-Codes, dem ein paar </div>-Tags fehlen, und somit #site sich innerhalb von #banner wiederfindet :D

Mit diesem korrekt ausgeschriebenen Markup greift auch mein CSS :)
HTML:
    <body>
        <div id="cube"></div>
        <div id="menu">
            %Menü%
        </div>
        <div id="banner"></div>
        <div id="site">
            <table width="100%">
                <tr>
                    <td>
                        %Inhalt%
                    </td>
                </tr>
            </table>
        </div>
    </body>


Achja, im Sinne von Wiki würde das CSS so lauten:

CSS:
#site {
    margin-top:147px;
    margin-left:160px;
    background: #ffffff;
    border: solid 1px #a7d7f9;
    border-right: solid 0px #ffffff;
    overflow:auto;
}
 
Zuletzt bearbeitet:
Zurück