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:
![enter image description here][1]
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 an menu is?
How to handle custom png shadows 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.
If you want some items at 100% width then you will need to do it in sections and not use a main page wrapper.
You’d just have a div at 100% to hold the background and inside that you have your content container at 960px width and centred with auto margins. Then finish that section and start another and so on. You could put the shadows as a background image centred on that 100% wide wrapper (create them carefully as there may be a 1px jog on the 100% percentage width so make sure the shadows go under the middle container by a pixel or two).
Basically don’t use a main page wrapper for the whole page but do it in sections as required.
Thanks for really good answer, i’ve decided to go the way you said, plus which is obvious, i’m using same class for blocks i want to have centered, to minimize code.
