Question

I have the following problem: I have a table with a fixed width and height, which should be in the middle.

The right of it should be div, with a width from the right edge of the table to the left edge of the browser, but it is necessary that in this div image was cropped on the right (so that only the left side, the size of div)

On the left side of the table you need the same thing in reverse, as well as lower

Here’s what it looks like – http://db.tt/bZU8Z9SJ

How can you do?

Answer 1

Alright, to give you some more of an answer, make a basic layout with divs:

<div id="container">
    <div id="left"></div>
    <div id="table"> <!-- Your table here --> </div>
    <div id="right"></div>
</div>

And add some CSS:

#table{
    float: left;
    width: 50%;
    height: 200px;
}

#left{
    float: left;
    background: #3f3;
    width: 25%;
    height: 200px;
    background-position: right;
}

#right{
    float: left;
    background: #f3f;
    width: 25%;
    height: 200px;
    background-position: left;
}

Fiddle here: http://jsfiddle.net/ycS2N/