# DIV soll beim Scrollen stehen bleiben



## soezkan (7. Januar 2010)

Hallo zusammen,

frohes neues Jahr ...

Ich wusste nicht wonach ich suchen soll bzw. habe nichts gefunden:
wie kann ich zwei DIVs in einem drei-Spalten-Layout statisch machen,
so dass sich nur das mittlere DIV beim nach unten scrollen bewegt?

Mein Layout: 

```
<div id="left">...statisch...</div>
<div id="center">...beweglich beim scrollen...</div>
<div id="right">...statisch...</div>
```

Kann mir da bitte jemand einen Tipp geben? Die JS die ich gefunden habe
zittern irgendwie wenn man scrollt.

Danke!

Liebe Grüße
Soezkan


----------



## chmee (7. Januar 2010)

*position:fixed;*

http://de.selfhtml.org/css/layouts/fixbereiche.htm#definieren

mfg chmee


----------



## Maik (7. Januar 2010)

Hi,

und weil du in der Vergangenheit in deinen CSS-Themen immer den IE6 im Auge hattest, empfehle ich dir http://code.google.com/p/ie7-js/ in der Seite zu implementieren, da position:fixed von ihm nicht interpretiert wird.


http://ie7-js.googlecode.com/svn/test/fixed.html

mfg Maik


----------



## soezkan (7. Januar 2010)

anke schonmal für die Antworten!

Das komische ist nur, dass jetzt mein gesamtes inneres Layout nach links 
verschoben wird:

```
<div id="left">...statisch...</div>
<div id="center">...beweglich beim scrollen...</div>
<div id="right">...statisch...</div>
```

So ca. 20px bricht das nach links aus, wenn ich 

```
html>body {  /* nur fuer moderne Browser! */
	position: fixed;
}
```
in meinem CSS angebe.

Hm komisch,,,,


----------



## Maik (7. Januar 2010)

Wofür soll diese Regel überhaupt dienen:

```
html>body {  /* nur fuer moderne Browser! */
	position: fixed;
}
```
... wenn die DIV-Blöcke fixiert werden sollen?

In chmees verlinktem Beispiel folgt in dem Selektor noch der ID-Bezeichner des zu fixierenden DIVs:

```
html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
}
```


Daraus folgt für deinen Fall:

```
html>body #left,  html>body #right {  /* nur fuer moderne Browser! */
    position: fixed;
}
```


mfg Maik


----------



## soezkan (8. Januar 2010)

Danke für die Antwort.

Allerdings klappt das bei mir einfach nicht!
Wenn ich das so mache wie hier angegeben, dann sind
die Positionen meiner beiden *fixierten DIVs* *0,0* was heisst
dass Sie ganz links, ganz oben angezeigt werden =>
die Seite fällt also auseinander.
Habe das versucht über margins zu "retten" aber das
klappt für alle Browser ausser dem *IE 7 + 8*

Das ist das Schema meiner Seite:

```
<html>
<body>
<div id="centerboxmain">
	<div id="LeftColumn">... soll FIXIERT sein ...</div>
	<div id="CenterColumn">
        <div id="HeaderBox">... header bla ...</div>
        <div id="NavigationBox">... Navigation ...</div>
        <div id="ContentBox">
		... bleibt mit SCROLLING ...
		</div>
		<div id="FooterBox">... footer bla ...</div>
	</div>
	<div id="RightColumn">... soll FIXIERT sein ...</div>
</div>
</body>
</html>
```

Meine Seite: http://www.rodurago.net/
Wenn man mit dem Firebug da mal im CSS das
*div#LeftColumn *mit einem *position: fixed* versieht,
dann weiß man was ich meine.

Danke für Zeit und Nerven. Ich verstehs halt echt
nicht wieso das nicht einfacher geht 

Liebe Grüße
Soezkan


----------



## Maik (8. Januar 2010)

*#centerboxmain* muß in diesem Fall zusätzlich mit position:relative versehen werden, damit sich die fixe Positionierung der Nachfolgeelemente auf seinen Anzeigebereich, und nicht auf den Fensterrand bezieht, denn das ist die Voreinstellung für position:fixed.

Desweiteren ist für *#CenterColumn* eine entsprechende relative Positionsangabe von links vonnöten, damit der Spaltenblock nicht unter den linken Spaltenblock rutscht.

mfg Maik


----------



## soezkan (8. Januar 2010)

Danke. 

Habe es so gemacht:

```
#centerboxmain {
	...
	position: relative;
}

...

div#LeftColumn {
	...
	position: fixed;
}

...

div#RightColumn {
	...
	position: fixed;
	left: 999px;
}

...

div#CenterColumn {
	...
	position: relative;
	left: 140px;
}
```

Aber der IE mag das nicht und klappt auseinander un ds
DIV LeftColumn wird bei selbem garnicht mehr angezeigt. 
Das nervt ... wahrscheinlich bin ich zu ungeduldig 
Noch Rat?

Lieben Dank,
Soezkan


----------



## Maik (8. Januar 2010)

Ich hab mir das gerade mal mit einer eigens erstellten Testseite in den Browsern näher betrachtet, und komme zu dem Schluß, dass dein Vorhaben sich in einem horizontal zentrierten DIV mit zwei fixierten Spaltenblöcken nicht umsetzen lässt, denn entweder rutscht der rechte Spaltenblock unter/über den linken, oder sitzt außerhalb des Elternelements am rechten Fensterrand, wenn er zusätzlich die Positionsangabe right:0 erhält, weil sich diese Positionsangabe wieder auf den Fensterrand bezieht.

Mit einem einzigen fixierten Spaltenblock würde es, wie von mir eben geraten, tadellos funktionieren. Sobald aber ein zweiter hinzukommt, spielen die Browser ausnahmslos verrückt.

Von daher wirst du dir hier etwas anderes überlegen müssen, denn mit drei Spaltenblöcken funktioniert dies in den Browsern nur auf diese Weise, wodurch der mittlere Spaltenblock aber eine relative Breite besitzen würde:


```
<body>
     <div id="leftCol">leftCol</div>
     <div id="centerCol">centerCol</div>
     <div id="rightCol">rightCol</div>
</body>
```


```
#leftCol {
position:fixed;
left:0;
width:100px;
}
#centerCol {
position:absolute;
left:100px;
right:100px;
}
#rightCol {
position:fixed;
right:0;
width:100px;
}
```

mfg Maik


----------



## soezkan (8. Januar 2010)

Ganz lieben Dank für den hilfreichen Rat!

Ich werde dann wohl erstmal auf diese Variante mit fixierten DIVs verzichten.

Einen schönen Tag
Soezkan


----------

