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

Question

There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:

I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..

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

The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say 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 div to be black. This way it looks like one fluid heading that spans the whole width of the screen.

Thanks.

Answer 1

Hi,

You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.

Hope this helps, Alin

...WWWWW| DIV |BBBBB...

Answer 2

Anyway I don't think it's possible without using a table. Usually floatting div are size-fixed and center div is fluid.

Answer 3

A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:

jsFiddle solution

This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.

Note that you might have to use a javascript workaround for the height-issues.

Answer 4

Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.

If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:

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

that way it should sit behind your container (middle) div.