Variable DIV Breite

gerba · 28. Okt. 2009

Hallo alle!

Ich komm einfach nicht auf einen grünen Zweig...
Ich möchte mit CSS ein Design erstellen, und krieg es einfach nicht hin, weil ich mich mit CSS nicht wirklich auskenne.

Vielleicht könnt ihr mir weiterhelfen?

Ich poste unten den Code einer Beispiel-Page, um zu zeigen, wo ich anstehe.

Freue mich über jede Hilfe!

LG Gerald

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<style type="text/css">
 body{
  margin:0;
  padding:100px 150px 50px 150px;
 }
 div#header{
  background:lightgrey;
  color:black;
  position:absolute;
  top:0;
  left:150px;
  right:150px;
  height:100px;
 }
 div#right-sidebar{
  background:#E2FEDE;
  color:black;
  position:absolute;
  top:0;
  right:0;
  width:150px;
  height:100%;
 }
 div#left-sidebar{
  background:#E2FEDE;
  color:black;
  position:absolute;
  top:0;
  left:0;
  width:150px;
  height:100%;
 }
 div#footer{
  background:lightgrey;
  color:black;
  position:absolute;
  bottom:0;
  left:150px;
  right:150px;
  height:50px;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> 
    <p>Header shall be fixed in height and width.</p></div>
<div id="left-sidebar"> 
    <p>Left border width shall be variable, depending on the window width.</p>
</div>
<div id="right-sidebar"> 
    <p>Right border width shall be variable, depending on the window width.</p>
</div>
<div id="footer"> 
    <p>Footer shall be fixed in height and width.</p>
</div>
<div id="content">
 <p>Content area shall be fixed in height and width, but vertically scrollable by the browser scrollbar (as is).</p>
 <p> </p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
 <p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
</div>

kkapsner · 28. Okt. 2009

So?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/CSS">
#wrapper{
	margin: 0 auto;
	background-color: blue;
	width: 500px;
}
#header{
	height: 40px;
	width: 100%;
}
#content{
	height: 100px;
	width: 100%;
	background-color: red;
	overflow: auto;
}
#footer{
	height: 40px;
	width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="content">long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </div>
	<div id="footer"></div>
</div>
</body>
</html>

gerba · 28. Okt. 2009

Hi!

Danke für die rasche Antwort!

Nicht ganz so...

Der Header soll ganz oben sein.
Der Footer soll ganz unten sein.
Der Scrollbalken soll nicht innerhalb des DIV sein, sondern der vom Browserfenster selbst - so wie im Beispiel.

LG Gerald

gerba · 28. Okt. 2009

Hi alle!

Hab's jetzt mit Hilfe eines Freundes geschafft.
Falls es euch interessiert, poste ich im Anschluss den Code.

LG Gerald

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<style type="text/css">
 body{
  margin:0;
  background:#E2FEDE;
 }
 div#header{
  background:lightgrey;
  color:black;
  position:fixed;
  top:0;
  width:743px;
  height:100px;
  z-index:11;
 } 
 div#footer{
  background:lightgrey;
  color:black;
  position:fixed;
  bottom:0;
  width:743px;
  height:50px;
  z-index:10;
 } 
 div#content{
  background:white;
  color:black;
  padding-top:100px;
  padding-bottom:50px;
  margin: auto;
  width:743px;
  z-index:-5;
 } 
</style>
<div id="content">
	<div id="header"> 
		<p>Header shall be fixed in height and width.</p>
	</div>
	<p>Content area shall be fixed in height and width, but vertically scrollable by the browser scrollbar (as is).</p>
	<p> </p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
	<div id="footer"> 
		<p>Footer shall be fixed in height and width.</p>
	</div> 
</div>

anna55 · 28. Okt. 2009

Schön, wenn's jetzt so aussieht, wie du es dir vorstellst.

Allerdings fehlt noch der korrekte Aufbau des HTML, wie er im Beispiel von kkapsner drin steht.
Am Besten, du gibst deinen Code mal hier ein und siehst dann, was noch fehlt:
http://validator.w3.org/#validate-by-input

kkapsner · 28. Okt. 2009

so?

Code:

<style type="text/CSS">
html, body{
	height: 100%;
}

#wrapper{
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	background-color: blue;
	width: 500px;
}
#header{
	position: fixed;
	top: 0;
	height: 40px;
	width: 500px;
	background-color: green;
}
#content{
	width: 100%;
	background-color: red;
	margin: 40px 0;
}
#footer{
	position: fixed;
	bottom: 0;
	height: 40px;
	width: 500px;
	background-color: green;
}
</style>

funktioniert aber nicht im IE6.

anna55 · 30. Okt. 2009

kkapsner schrieb:
funktioniert aber nicht im IE6.

Hab auch mal was basteln wollen, geht bei mir auch im IE6

PHP:

<style type="text/CSS">
html, body{
	height: 100%;
	padding: 0;
	margin: 0;
}

#wrapper{
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	background-color: blue;
	width: 500px;
}
#header{
	height: 40px;
	width: 500px;
	background-color: green;
}
#content{
	position: relative;
	float: left;
	width: 500x;
	padding: 20px 15px;
	height: 100%;
}
#footer{
	padding: 0;
	position: absolute;
	bottom: 0;
	height: 40px;
	width: 500px;
	clear: left;
	background-color: green;
}
#clear{
	clear:both;
}

Dazu kommt nach dem

PHP:

<div id="footer"></div>

noch ein

PHP:

	    <div id="clear"></div>

kkapsner · 30. Okt. 2009

Da ist aber der Footer nicht immer am unteren Bildschirmrand. (deswegen bei mir das fixed, was nicht im IE6 funktioniert)

anna55 · 30. Okt. 2009

kkapsner schrieb:
Da ist aber der Footer nicht immer am unteren Bildschirmrand. (deswegen bei mir das fixed, was nicht im IE6 funktioniert)

Hm, bei mir schon, auch wenn ich den Text reduziere, bleibt der Footer im IE6 unten stehen. Basis ist dein HTML in Post 2.

kkapsner · 30. Okt. 2009

Wenn der Text kleiner ist als das Fenster - ja, aber nicht, wenn der Text länger als die Seitenhöhe ist.

anna55 · 30. Okt. 2009

kkapsner schrieb:
Wenn der Text kleiner ist als das Fenster - ja, aber nicht, wenn der Text länger als die Seitenhöhe ist.

Hm, du meinst, wenn Scrollbalken da sind?

Hab das Beispiel mal hochgeladen und getestet mit Multiple IE und auch mal hier hochgeladen:
http://browsershots.org

Sieht jeweils gut aus im IE 6.

kkapsner · 31. Okt. 2009

anna55 schrieb:
Hm, du meinst, wenn Scrollbalken da sind?

Ja. Dachte der Fragesteller möchte das so haben.

Variable DIV Breite

gerba

New member

kkapsner

Super Moderator

gerba

New member

gerba

New member

anna55

Moderator

kkapsner

Super Moderator

anna55

Moderator

kkapsner

Super Moderator

anna55

Moderator

kkapsner

Super Moderator

anna55

Moderator

kkapsner

Super Moderator