Question

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 image to be in a div with a fixed width and centered.

So I have the following setup

<div class="menuLinks">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks">Some links</div>

And the css

.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}

Any help with this is much appreciated.
Thanks

Answer 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

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