PHP N00b PHP N00b - 1 year ago 62
HTML Question

Div's keep moving position?

My header should look like this. but every hour or so it reverts to this. I have it set up so that there are two divs behind the main image so that they can be repeated no matter how wide the user's browser is.

the problem is that the images change position (they move up or down) whether I'm working on the layout or not. I don't know what is causing it to change every so often, but it's driving me nuts!!

The website is (sorry i can't post more than 2 links right now) in case you need to check out anything that I forgot to provide here.

The applicable header HTML looks like this:

<div id="top1"></div><div id="top2"></div>
<div class="container">
<div id="logo-area">

My CSS looks like this:

#top1 {
background:url("") repeat-x;
#top2 {
width: 49%;
position: absolute;
top: 91px;
right: 0;
height: 141px;
background: url("") repeat-x;
z-index: -10;
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
.container #logo-area { text-align: center; margin-bottom: 57px; }

If anybody has any ideas of why it would be changing position on me, I would greatly appreciate your input!! Thank you!

Answer Source

When you are setting elements have the position property of absolute and you try to align the with other elements you should wrap them in another element such as a div or section tag and give it the position over relative.

Your current code seems a little messy therefore I've recoded your desired design element. Your Logo area will need to be moved outside of it's current container and left sitting on it's own after your header.


.LogoArea {
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    min-width: 960px;
    margin-top: -60px;
    /* margin-bottom: 60px; */
    box-shadow: 0 0 7px rgba(0,0,0,0.05);
.LogoArea>.RightStripe {
    width: 49%!important;
    position: absolute;
    z-index: -10;
.LogoArea>.LeftStripe {
    background: url("/images/topLeft_bg.gif") repeat-x;
    background-position: 0 -72px;
    height: 35px!important;
    top: 72px;
.LogoArea>.RightStripe {
    background: url("/images/topRight_bg.gif") repeat-x;
    right: 0;
    height: 21px;
    background-position: 0 -120px;
    top: 120px;
.LogoArea>.Logo {
    background: url("/wp-content/uploads/2016/05/logo.jpg");
    width: 781px;
    height: 245px;
    margin: 0 auto;
.LogoArea>.DonateLink {
    width: 721px;
    margin: 0 auto;
    margin-top: -27px;
    display: block;
    background: #F2F7E9;
    color: #EBEBDA;
    font-size: 14px;
    padding: 6px 1em;
    text-align: center;
    border-top: 1px solid #EBEBDA;
.LogoArea>.DonateLink:hover {
    background: #EDF5DE;
    text-decoration: none;
    color: #4CAF50;


<div class="LogoArea">
    <div class="LeftStripe"></div>
    <div class="RightStripe"></div>
    <div class="Logo"></div>
    <a href="YOUR DONATION LINK HERE" title="Donate using PayPal" class="DonateLink">Donate</a>

The HTML part should be placed in your header file at the bottom. Before <!-- end #main-header --> as your logo makes up part of your header.

I hope this improved answer makes more sense and overall works better.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download