Three column layouts: fixed-width center with fluid side columns

Question

I am trying to implement a design in CSS that will have a mosaic background on the body. I want to use a png image in the background content in the form of an oval mask of opacity on the background of the body. The side columns (and the footer with cropped overflow) will have a partially opaque black background that matches the edges of the .png mask.

The goal is to have a central area with a fixed size with a complex background template that fills a browser window of any size.

I can’t think how I will do it. margin:auto doesn't seem to be enough for my basic requirement, and I don't think I can add a large fixed pointer to the side columns without losing centering.

Here's a rough layout mockup.

Answer 1

According to your screenshot you can write like this:

 body{ background: url(image.jpg) repeat center center; } .container{ width:500px; margin:0 auto; } 

UPDATED:

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

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

But it works in modern browsers

UPDATED

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

it works in all browsers

Answer 2

I worked on a solution using absolute positioning. I appreciate any comments.

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

I tried to work with floats and negative margins, but the backgrounds overlapped, which didn't work, as I need this for the background masks, and overlapping will cause bleeding between the masks.

My solution also splits background columns into its own div. Then I can hide the overflow for this div without hiding it for the content. This allows scrollbars to appear only when the window is smaller than the content.

Answer 3

Draw a background image using this CSS:

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

Make the oval shadow translucent .png and cut it into four parts. Attach the shapes 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 elements of pseudo-elements if they are not located relatively).

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

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

Demonstration of the above methods

Answer 4

There are several blogs that have discussed this, including Perfect Multi-Column CSS Liquid Layouts . I am sure that if you read it (it is really very interesting), you will be able to adapt it according to your needs, if it is not already done.

Answer 5

Can you work with something like this? I can explain this more if you think this is what you are looking for.

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