3 Divs Middle Centered Sides Zoomable All In One Vertically Centered Div

i spend almost 2 days and have no idea how to do this. here is some code:

> <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>

and add some small style rules to the right and left div:

#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 ;)*/
}

just adjust the width of wrapper and there you go

Share