Three column layout: fixed width center with fluid side columns

Question

I\'m trying to implement a design in CSS that will have a tiled background on the body. I want to use a png image in the content background as an oval-shaped opacity mask o

Answer 1

As per your screenshot you can write like this:

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

UPDATED:

Solution according to your question Three column layout: fixed width center with fluid side columns

http://jsfiddle.net/XMg2h/3/

But it's work in modern browsers

UPDATED

http://jsfiddle.net/XMg2h/10/

it's work in all browsers

Answer 2

Tile the background image with this CSS:

 body{
      background:url(wallpaper.png);
 }

Make the 'oval shadow' into a semi-transparent .png and cut it into four pieces. Attach the pieces to the corners of the document using absolutely positioned pseudo-elements.

 body:before{
      content:''; 
      display:block; 
      background:url(oval-shadow-top-left:.png);
      position:absolute; 
      top:0; left:0; 
      height:300px; width:400px;
} 

Do this for each corner (you can use any element's pseudo-elements, as long as it's not relatively positioned).

Center the div, and give it a z-index to make sure it stays above the pseudo-elements.

 div{
      width:300px; height:200px; 
      margin: 50% auto; 
      position:relative; 
      z-index:100;
      top:-150px;
 }

Demo of above techniques

Answer 3

There are several blogs that have discussed this, including Perfect Multi-Column CSS Liquid Layouts. I'm sure if you read through it (it's really quite interesting), you'll be able to adapt it to fit your needs, if it does not already do so.

Answer 4

Can you work with something like this? I can explain it more if you think that this is what you're looking for.

http://jsfiddle.net/Wexcode/Atjtt/

Answer 5

I've worked a solution using absolute positioning. I appreciate any comments.

http://jsfiddle.net/tupCS/12/

I tried working with floats and negative margins, but the backgrounds overlapped, which would not work since I am needing this for background masks and the overlap would cause bleeding between the masks.

My solution also separates the background columns into their own div. I can then hide overflow for this div while not hiding it for the content. This allows scroll bars to appear only when the window is smaller than the content.