How to build css layout for this?

A 3 column table layout is easy. A gradient background. Left and right col for shadow, mid col for contents.

But how do I build it with div/css?

The 3 cols have to be equal height and dynamic ie, it stretches if content stretches.

This is the basic structure:

...
<style type='text/css'>

body{ background:url('') no-repeat top center black; }
#wrapper{ width:900px; margin:0 auto; }
#wrapper div { width:300px; float:left }
#wrapper .clearme{ width:100%; float:none; clear:both }

</style>

</head>

<body>

<div id='wrapper'>
  
   <div></div>
  <div></div>
  <div></div>
<div class='clearme'></div>

</div>

</body>

...

E

If its a fixed width then just cap it top and bottom with a wide image in each container. Next repeat the middle section image along the y-axis with another wide image on the main container that holds the content.

You don’t need three columns just for the shadow graphics and indeed if it was a fluid width you would just use nested divs and apply the image to each div as required and they will always stretch to the height of the content.

Here’s an example someone asked for the other week that seems similar. It isn’t optimised for IE6 as IE6 doesn’t understand transparency and if you want to support IE6 then you need to use non transparent images that match the gradient of the background. This means extra divs for each of the gradients and makes it more complicated.

You also need to lose that circular gradient in the middle of the background as that makes no sense as it can’t possibly scale with the layout. You could possibly use one large image and apply it as position:fixed in the center of the body element but radial gradients like that are generally a bad idea.

If you wanted a 100% high layout then it gets even more complicated again and you would need to do something like this.

You should try and avoid designs that need transparency or at least keep them simple if support for IE6 is required (even if IE6 support isn’t required then still keep transparent pngs to a minimum because of their larger file size) . Remember that a webpage isn’t static like a drawing and is a living thing that changes depending on content.

hmm…if i’m not wrong, the 3 divs will not be equal height?

thanks for the example. made me change the concept of viewing the shadow and content as one, rather than separate entities.

the circular background will just be a background image aligned to the top. it doesn’t repeat.

great! i can improve the standards for e next project. thanks! :smiley:

hmm…if i’m not wrong, the 3 divs will not be equal height?

I misunderstood what you were asking. The layout I showed has three columns inside the white box. The shadow is a background image as Paul said. You do need to figure out what you want this to look like with more page scroll. If you want a one column layout, just take the divs out of the wrapper.

:slight_smile: ic…thanks!