Header 100% width. Content fixe Breite und 100% height

johncss

Grünschnabel
Hi,

ich stehe grade ein wenig auf dem Schlauch. Ich habe folgendes HTML und CSS:

HTML:
<head>
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="container">

		<div id="header">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</div>

		<div id="content">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</div>

		<div id="footer">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</div>
	</div>

</body>

HTML:
html,body {
	margin:0;
	padding:0;
	height:100%; 
	background:gray;
	color:#666;
}

div#container {
	position:relative; 
	margin:0 auto; 
	width:750px;
	background:#f0f0f0;	
	height:auto !important; 
	height:100%; 
	min-height:100%; 
}

div#header {
    height: 140px;
    color: #FFFFFF;    
    position: relative;
    background-color: #33393E;	
}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; 
	background:#33393E;
}

Ich möchte, dass die Hintergrundfarbe des Headers sich über die gesamte Breite des Browsers erstreckt. Wie mache ich das am besten? Der Text im Header soll aber weiterhin nur width:750px haben.

Ansonsten soll das Format so bleiben.

Was ich probiert habe:
- Den Header außerhalb des Containers platzieren. Dann erhalte ich zwar den erwünschten Effekt, habe aber einen unnötigen Scrollbalken!?

Danke für eure Hilfe!
 
Erstelle eine 1px breite und 140px hohe Grafik mit der Hintergrundfarbe #33393E. Füge diese als Hintergrundgrafik im body ein und ergänze dort

Code:
background-repeat: repeat-x;
background-positon: 0 0;

Und nebenbei solltest Du auch auf die relative Positionierung der Elemente verzichten, denn die Eigenschaft bringt dir momentan überhaupt nicht.
 

Neue Beiträge

Zurück