Expand Multiple Divs To Fit Horizontal Width Of Screen

I am making a menu which has three parts to it: Menu links left Images Menu links right I need the menu links on the left and right to expand the full width of the screen and the

Solution 1:

This is a solution which is Fully CSS and HTML.

CSS

#wrapper{
  width:100%;
  text-align:center;
  overflow: auto;
}
#block-images{
  background-color: silver;
  width: 400px;
  margin:0 auto;
  position:absolute;
  left: 50%;
  margin-left: -200px;
}
.wrapper-menu-left{
    float:left;
    width:50%;
}
.wrapper-menu-right{
    float:right;
    width:50%;
}
.menuBlock{
    text-align: left;
}
#mLeft{
    background-color: green;
    margin-right:200px;
}
#mRight{
    background-color: navy;
    margin-left:200px;
}

HTML

<divid="wrapper"><divclass="wrapper-menu-left"><divclass="menuBlock"id="mLeft">left</div></div><divclass="wrapper-menu-right"><divclass="menuBlock"id="mRight">right</div></div><divid="block-images">images</div></div>

Solution 2:

Here is your html menu :

<divclass="menuLinks"name="links">Some links</div><divclass="menuImage"><imgsrc=""alt="" /></div><divclass="menuLinks"name="links">Some links</div><divclass="menuImage"><imgsrc=""alt="" /></div><divclass="menuLinks"name="links">Some links</div>

Just use css to size menuImages :

<style>.menuImage{width:400px;float:left;}
</style>

Use javascript on load to find screen resolution and find each link div size :

<scriptlanguage="javascript">functionresizeMenu()
{
   var linksList = document.getElementsByName('links');
   for(var i = 0; i < linksList.length; i++)
   {
      linksList[i].style.width = (screen.availWidth 
         - 2 * (400) //size of total images)
         / linksList.length; // total number of linksCount
   }
}

resizeMenu();
</script>