Div in Div vertikal

[someRookie]

Hallo Leute,

ich hab zu dem Thema schon soviel gefunden, aber irgendwie komm ich dennoch nicht weiter und hoffe auf hilfe.
ich hab ein div namens container und ein div namens content...
das div-content soll mittig sitzen, brauch aber nicht horizontal zentriert sein. Sobald das div-content die höhe von 210px überragt soll der scroller im content-container einsetzen.

Wäre toll, wenn mir jemand aus der patsche helfen kann. Browserübgreifend .

  
<div id="container" style="height:210px;overflow-y: auto;">  
  
    <div id="content" style="position: relative; top: 50%">  
       <ul>  
          <li>text 1</li>  
          <li>text 2</li>  
          <li>text 3</li>  
      </ul>  
    </div>  
  
</div>  
  

lieben Gruss
Tanja

[De Koch]

das div-content soll mittig sitzen, brauch aber nicht horizontal zentriert sein.

Ich nehme mal an der Inhalt des content-Divs soll variabel sein, von daher würde die Möglichkeit einen festen margin-top Wert zu setzen wegfallen.
Für einen variablen Inhalt fielen mir da nur zwei Lösungen ein, beide nicht so schön.

Die eine wäre das content-Div in eine Tabelle zu packen und mit vertical-align: middle; zu positionieren.

Die andere wäre mit Javascript. Stichwort: Computed Style

Sobald das div-content die höhe von 210px überragt soll der scroller im content-container einsetzen.

Das ist ja bereits der Fall.

[Gunnar Bittersmann]

@@De Koch:

nuqneH

Die eine wäre das content-Div in eine Tabelle zu packen und mit vertical-align: middle; zu positionieren.

Dauzu muss man es nicht in eine Tabelle packen (im Markup? – pfui!), sondern es lediglich als Tabellenzelle anzeigen lassen:

#container  
{  
    height: 210px;  
    overflow-y: auto;  
}  
  
#content  
{  
    display: table-cell;  
    height: 210px;  
    vertical-align: middle;  
    width: 100%;  
    padding-top: expression( [code lang=javascript](new Function('elem', '[code lang=javascript]elem.style.height = "auto"; elem.style.paddingTop = (210 - elem.offsetHeight) / 2 + "px";
~~~'))(this)[/code] );  
}[/code]  
  
  

> Die andere wäre mit Javascript. Stichwort: Computed Style  
  
Ja, aber nur für Browser, die dies nötig haben, also für IE < 8. Und das JavaScript auch an Ort und Stelle im Stylesheet notiert – [CSS-Expression](http://bittersmann.de/articles/css-expressions/), s.o.).  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[De Koch]

Dauzu muss man es nicht in eine Tabelle packen (im Markup? – pfui!), sondern es lediglich als Tabellenzelle anzeigen lassen:

Wusste gar nicht, dass es sowas gibt. Naja ... man lernt dazu :D

[someRookie]

@@De Koch:

#container

{
    height: 210px;
    overflow-y: auto;
}

#content
{
    display: table-cell;
    height: 210px;
    vertical-align: middle;
    width: 100%;
    padding-top: expression( [code lang=javascript](new Function('elem', '[code lang=javascript]elem.style.height = "auto"; elem.style.paddingTop = (210 - elem.offsetHeight) / 2 + "px";

> }[/code]  
>   
>   
> > Die andere wäre mit Javascript. Stichwort: Computed Style  
>   
> Ja, aber nur für Browser, die dies nötig haben, also für IE < 8. Und das JavaScript auch an Ort und Stelle im Stylesheet notiert – [CSS-Expression](http://bittersmann.de/articles/css-expressions/), s.o.).  
>   
> Qapla'  
  
table-cell wird aber nicht von älteren Browsern der IE reihe unterstüzt oder irre ich mich da jetzt ?  
diese variante kannte ich nämlich schon!  
  
das mit den expression im css ist allerdings auch frü mich neu

[Gunnar Bittersmann]

@@someRookie:

nuqneH

[Javascript] aber nur für Browser, die dies nötig haben, also für IE < 8.
table-cell wird aber nicht von älteren Browsern der IE reihe unterstüzt oder irre ich mich da jetzt ?

Da irrst du nicht. Genau das sagte ich doch schon.

Du irrst allerdings bei den Leerzeichen: Deppenleerzeichen, Plenk.

Qapla'

[someRookie]

@@someRookie:

nuqneH

[Javascript] aber nur für Browser, die dies nötig haben, also für IE < 8.
table-cell wird aber nicht von älteren Browsern der IE reihe unterstüzt oder irre ich mich da jetzt ?

Da irrst du nicht. Genau das sagte ich doch schon.

Du irrst allerdings bei den Leerzeichen: Deppenleerzeichen, Plenk.

Qapla'

das ich zum plenkeln neige weiß ich, stört aber nur andere! :p

mich stört eher, dass dieses einfache problem so "schwer" zu handln ist.

T.