Question

I’ve got this layout that i want to cut into html/css, but i’m struggling with picking best way to strcture html/css for major content (like diffrent bg block in the middle that is under 960 content block, and covers whole wideness etc.). I’ve attached a structure of the layout:

So my main quesions are:

• How to handle custom bg block that is ,,outside” of grid, or should
  it be inside, and then make content block be inside contenbg, and
  outside the container, that logo and menu is?
• How to handle custom png shadows (i wanna avoid css3 in this case) that should be outside the content
  slider (as on image)
• Same question applies to footer, should it be outside the main 960
  container? Should i use ,,main container” at all in this case? I’m
  not sure whats the best practise here.

Thanks

Answer 1

I’m unable to see the attached file but I’ll try to give you some guidelines:

1. You should have a main content which is centred on the screen and is 960px wide.
2. If the header/footer are the same width (i.e. their Background doesn’t span more than 960px), they should be in the container div. On the other hand, if their BG is wider than 960 put each in a separate div which spans as wide as you need and inside this div put another div which is 960 wide and centered.

example:

<div id="headerWrapper">
    <div id="header">...</div>
</div>
<div id="content">...</div>
<div id="footerWrapper">
    <div id="footer">...</div>
</div>

1. if you want png shadows without using CSS3 your only option is slicing the image with the shadow.

I hope that answers your questions.