Objective

To order markup/source like so:

But to display have to the browser display it like so:

#content

#content-primary

#content-secondary

#content-tertiary

#analytics

Question(s)

  1. Is there any other way to achieve this effect w/o using #content {padding-top:130px;}?
  2. Is this the cleanest/bullet-proof way to have #header display above #content?
  3. If any, how would one do it using negative margins if does work better in this situation?

Here's the additional rules along side Blueprint’s:


.container {
    position:relative;
    background:url('http://blueprint.pixelbebop.com/blueprint/lib/grid.png');
}
#header {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:130px;
    background:#09f;    
}
#content {
    padding-top:130px;
    background:#cba;    
}
#footer { background:#bca; }
#analytics { display:none; }

Answer(s)

Hopefully addressed over here by the knowledgeable SPF folks