1

I'm building a page template with a transparent header, and I'm trying to make the #content div align to the very top of the page, underneath the header.

I've tried css such as:

position:absolute; 
top:0; 
left:0;

and so far none of it has worked..

Here is my page template stylesheet below, and the page in question is:

.wrapper {
    min-width: 100%;    
    height: auto !important; 
}

.header {
    background-color:transparent;
    width: 75%;
    max-width: 75%;
    height: 40px;
    padding-top: 32px;
    padding-bottom:32px;
    margin-right: auto;
    margin-left: auto;  
}

#content {
    position: absolute;
    top:0;
    left:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: light;
    color: #ffffff;
    background-color: #ffffff;
    height: auto;
    width: 100%;
    max-width:100%;
    min-width: 960px;
    margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    line-height: 30px;
}

Any advice as to what I'm doing wrong would be greatly appreciated.

Thanks!

Jack Averill
  • 821
  • 1
  • 10
  • 27

1 Answers1

1

Try this:

#content {
    position:absolute; 
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
}

.header {
    z-index: 2;
    position: absolute;
    /* background-color: transparent; <-- not necessary */
    width: 75%;
    max-width: 75%;
    height: 40px;
    padding-top: 32px;
    padding-bottom: 32px;
    /* margin-right: auto; <-- not necessary */
    /* margin-left: auto;  <-- not necessary */
    left: 50%; /* new; center header horizontally */
    transform: translateX(-50%); /* new; fine tune horizontal centering */
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hi Michael, this only got rid of the white space beneath the header. I've just added " z-index:2; position:absolute; " to the header css, which has kind of worked, but now the header isn't centred like the content and the footer. – Jack Averill Jan 03 '16 at 22:39
  • Sorry, I misinterpreted your request *underneath the header*. You meant along the z-axis, not the y-axis. And the question was unclear to me. Hold on... – Michael Benjamin Jan 03 '16 at 22:43
  • Hi Michael, sorry to bother you again but I've just noticed that this doesn't work on safari. It works fine on Chrome and Firefox, but for some reason the header shoots off to the right on Safari. Do you know a fix for this by any chance? – Jack Averill Jan 03 '16 at 23:54
  • Also, to obtain vendor prefixes you may need, enter your standard CSS in the left panel here: https://autoprefixer.github.io/ – Michael Benjamin Jan 03 '16 at 23:59
  • Bottom line: Add this one line of code right above the `transform` rule: `-webkit-transform: translateX(-50%);` – Michael Benjamin Jan 04 '16 at 00:02