# Div in Reihe bei fester Größe des outerContainer



## ne0hype (12. August 2009)

Hallo Leute,
ich stehe gerade vor einem Problem und weiss nicht so genau wie ich es lösen kann.

Zur veranschaulichung liegt anbei ein Bild.

Erklärung: Es soll ein DIV Container als eine art "Fesnter" fungieren. Dazu habe ich mir folgenden Code ausgedacht


```
<style type="text/css">
<!--
#container {
	height: 200px;
	width: 200px;
	overflow: hidden;
}
#innerContainer1, innerContainer2 {
	height: 200px;
	width: 200px;
}
-->
</style>

<div id="container">
	<div id="innerContainer1"></div>
    <div id="innerContainer2"></div>
</div>
```

Wie bekomm ich nun mittls CSS die DIVs in die Reinenfolge wie auf dem Bild

Ziel: Ziel ist es mittels Javascript einen Slider zu machen der zwischen den "innerContainer" hin und her wechselt und durch den "container" kann man dann jeweils den Inhalt der "innerContainer" sehen

Danke für die Hilfe


----------



## D34DL1NES (12. August 2009)

Ich nehme manl an der Blaue Rahmen soll den Sichtbaren bereich markieren und du willst nur ein Div sehen. Spanne um die beiden inneren Divs(im alle inneren die du haben willst) ein weiteres <div id="MoveContainer"> und animiere dieses. Ich persönlich empfehle ja jQuery, vorallem für Anfänger, aber das mus jeder für sich entscheidenin reinem JS geht es auch, aber ein Library wäre der vereinfachung halber zu empfehlen. Du musst dich also erstmal entscheiden wie du vorgehen willst: Library ja/nein wenn ja welche Library?


----------



## hela (12. August 2009)

Hallo,
gleiches Problem wurde erst neulich in diesem Thread besprochen.

```
<div id="scrollFenster">
  <div id="container">
    <div id="innerContainer1">Container1</div>
    <div id="innerContainer2">Container2</div>
  </div>
</div>
```
CSS:

```
#scrollFenster {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: auto; /* mit JS auf Wert "hidden" setzen */
  padding-bottom: 17px; /* Platz für Scrollbalken, mit JS auf Null setzen */
}
#container {
  position: absolute;
  top: 0;
  left: 0;  /* Wert von "-200px" würde den innerContainer2 zeigen  */
  width: 400px; /* = Breite für 2 innerContainer */
}
#innerContainer1, #innerContainer2 {
  float: left;
  width: 200px;
  height: 200px;
}
```


----------



## Maik (12. August 2009)

Moin.





D34DL1NES hat gesagt.:


> Du musst dich also erstmal entscheiden wie du vorgehen willst: Library ja/nein wenn ja welche Library?


Ist das für die CSS-Umsetzung wirklich von zentraler entscheidender Frage? 

Dieser JS-Slider, wie von ne0hype umschrieben und im Anhang skizziert,  bleibt "CSS-technisch" derselbe JS-Slider, ob nun mit oder ohne Hilfe eines JS-Frameworks (jQuery, mootools, prototype, scriptaculous) realisiert.

mfg Maik


----------



## Hektik (12. August 2009)

Den DIV-Tag mit  z.B. _style="float:left;"_ bereichern, wobei bei "left" der DIV links vom Rest positioniert wird. Mit "right" wird der DIV rechts von dem Rest positioniert.


```
<div style="float:left;">aaa</div><div>bbb</b>
```

Nur noch mal, weil es sich in den vorherigen Posts nicht so deutlich herausliest


----------

