Question

I’m trying to create this layout.

I would like the layout to be accessible via IE 8 and up and other standard web browsers. So i don’t want to use CSS3, if possible.

So far i got this (it’s without header and footer as those are primitive to add):

HTML:

<div class="right">
  <div class="left">
    <div class="container clearfix">
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    </div>
  </div>
</div>

CSS:

.right {background: url('images/bgr.jpg') no-repeat scroll right top #FFFFFF;}
.left {background: url('images/bgl.jpg') no-repeat scroll left top transparent;}
.container {width: 960px; margin: 0 auto; position: relative; text-align: left; border: 1px solid red;}
.clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}

The problem is, when I open it at resolution lower than (pic1Width + pic2Width + contentWidth) the pictures will cover the content making it disapear. I’m also not able add a fluid space on the left and right of the Picture 1 and 2.

Thanks for any hint!

Answer 1

I am assuming the center content is fixed in the middle with a margin:0, auto;

If that is the case, I would

body
{ 
background-image:url('background.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

And create the background image so that a) the pictures hug either side of the content and b) the edges fade into a color that can be solid enough to match the bg color (in case screen is too wide.)

Hope that helps.