3 divs mittlere zentrierte Seiten zoombar alle in einem vertikal zentrierten div - html, css

Ich verbringe fast 2 Tage und habe keine Ahnung, wie ich das machen soll. Hier ist ein Code:

<div id="wrapper">
<div id="left">
</div
<div id="middle">
<div id="centeredinmiddle">
</div>
</div>
<div id="right">
</div>
</div>

Was ich brauche ist: Wrapper zentriert vertikal, links und rechts zoombar, sagen wir jeweils 20% der Fensterbreite, mittlere statische Breite: 700px, zentriert mittig - horizontal zentriert.

Ich bin mir nicht sicher, ob es machbar ist, aber ich hoffe es ist.

Antworten:

http://jsfiddle.net/cJqAu/

ändere die Reihenfolge deiner floated divs ->

<div id="wrapper">
<div id="left">
foo bar
</div>
<div id="right">
bar foo
</div>
<div id="middle">
<div id="centeredinmiddle">
lorem ipsum dolor sit amet and so on...
</div>
</div>
</div>

und füge einige kleine Stilregeln zum rechten und linken div hinzu:

#wrapper
{
width: 70%;
margin-left: 15%;
/*this is not a beautiful and nice attempt, but it works*/
}
#left
{
float: left;
width: 10%;
}
#right
{
float: right;
width: 10%;
}
#centeredinmiddle
{
/*no need for further style rules if you nicely adjust the others ;)*/
}

Passen Sie einfach die Breite der Verpackung an und los gehts