How do I span two divs side by side for full screen width?

Question

There are many questions regarding side by side. I did not miss them. But I need something that covers the entire width of the screen. This is the situation:

I need three divs located side by side. Left, middle and right divs we will call them. The middle div contains the content of the website header and a fixed width (800 pixels). I want the left and right div to cover the rest of the screen width on both sides. So..

<-LEFT-> | MIDDLE | <- RIGHT →

The reason I want to do this is because the middle (content) div has backgrond, which is a gradient. Let them say that the left side of the gradient is white and the right side is black. I need the left div to be white, so it is a continuation, and the right one is black. Thus, it looks like a single fluid stream that spans the entire width of the screen.

Thank.

Answer 1

The solution to this problem that I once implemented was to use two div elements, absolutely positioned, with the center div as an overlay. I have a working example:

jsFiddle solution

, , : div 50% , div.

, , , javascript .

Answer 2

divs? , div, margin: 0 auto; css. (, 1px 2400px), .

, div , , css:

position: absolute;
width: 100%;
z-index: -1;

() div.

Answer 3

You should have only one centered div, and put on the body a background image of 1px height and a sufficiently large width and in the center. This image will have a left half white and a right black.

Hope this helps, Alin

...WWWWW| DIV |BBBBB...

Answer 4

In any case, I do not think this is possible without using a table. Typically, a floatting div is fixed in size, and the center of the div is fluid.