div image on middle of page with 2 different div on each side

Question

Is there a possibility to put an image on the middle of a page?
BUT: On the right side and the left side of the image, there are 2 areas that can grow according to the screen resolution.
These areas are "1 pixel repeat-x" images.
Please note: the image on the right side and the left side aren't the same picture!

Below a picture with a sketch that (I hope) will explain my problem:

Answer 1

You can do it like this

Set the image in .container where for now I have added sample text.

CSS

.rightArea,
.leftArea {
  position: absolute;
  width: 50%;
  background: yellow;
  top:0;
  left:0;
  height: 100%;
}
.rightArea {
  background: red;
  right: 0;
  left: auto;
}

Answer 2

Here is one way of building this layout using CSS table cells.

Start with this HTML:

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <img src="http://placekitten.com/400/200">
    </div>
    <div class="right"></div>    
</div>

and apply the following CSS:

.wrapper {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.left, .center, .right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
}
.center {
    width: 1%;
}
.left, .right {
    width: 50%;
}
.left {
    background-image: url(http://placekitten.com/4/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.right {
    background-image: url(http://placekitten.com/10/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.center img {
    display: block;
}

The .wrapper has a width of 100%, so it fills the width of the page.

The child elements .left, .center and .right are table cells.

.center is forced to shrink-to-fit the image by setting the width to some small value, for example, 1%.

The .left and .right elements are set to the same width, 50%, which forces them to take up the remaining space equally.

You can apply background images as needed to any of the child elements.

See demo at: http://jsfiddle.net/audetwebdesign/pG2v3/

Note: Most modern browsers support CSS table cells.

Answer 3

You can relay on a single container and pseudo-elements.DEMO

display:table/table-cell -properties will make this easy to manage: (update test with your image name/path)

HTML

<div>
    <img src="middle.jpg" />
</div>

CSS

img {
    display:block;/* avoid gap underneath*/
    margin:auto;/*optionnal*/
}
div {
    display:table;
    width:100%;
    background:#7E858F;
}
div:before, div:after {
    content:' ';
    display:table-cell;
    width:50%;/* will shrink to leave room for image */
    background-repeat:repeat-x;
}
div:before {
    background-image:url(left.jpg);/* slice of 1px */
}
div:after {
    background-image:url(right.jpg);/* slice of 1px */
}

DEMO

Answer 4

To freely grow sided placed divs, keeping a content in the middle, use a wrapper display: table; element, and set the inner divs to display:table-cell, so the center element will adjust according to the width of the right and left divs:

http://jsfiddle.net/4uHm8/

HTML:

<div class='wrapper'>
    <div class='left'></div>
    <div class='center'>test</div>
    <div class='right'></div>
</div>

CSS:

.wrapper {
    display: table;
    width: 100%;
    height: 200px;
}

.wrapper > div {
    display: table-cell;
}

.left {
    width: 30px;
    background: red;
}

.right {
    width: 50px;
    background: blue;
}

EDIT:

In the same line of thought, if you set only the central div's width, the left and right divs will adjust themselves equally using the remaining width... even zero.

http://jsfiddle.net/4uHm8/1/

.wrapper {
    display: table;
    width: 100%;
    height: 200px;
}

.wrapper > div {
    display: table-cell;
}

.center {
    background: blue;
    width: 100px;
}

.left, .right {
    background: red;
}

Answer 5

HTML

<div class="main">
    <div class="left">&nbsp;</div>
    <div class="image">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" height="150" width="120" alt="image" />
    </div>
    <div class="right">&nbsp;</div>
</div>

CSS

.main {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.left {
    float: left;
    width: 50%;
    background: #FF0000;
}
.right {
    float: right;
    width: 50%;
    background: #FFFF00;
}
.image {
    position: absolute;
}

jQuery

$(document).ready(function () {
    $(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
    $(window).resize(function() {
        $(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
    });
});

Example

http://jsfiddle.net/wphn9/