Search code examples
csspositioncss-positioncenterabsolute

Absolutely positioned div positioning from the center of web page

I have a site with an absolute positioned logo div on the top. It's parent is a relative div with 100% width.

I managed to get my position:absolute div where I want with next code:

css:

position:absolute; 
top:0; 
left:50%;
margin-left:-455px; 
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png'); 
width:206px;
height:99px;
z-index:999;

However I ran into problem: when the browser window width is less than the site width, the logo starts to move to the left side of screen.

My question:

How do I absolutely position my div related to the center of the site page, in other words I need my logo to be positiond X px away from the middle of the site...

Solution

  • The parent of the #headlogo element on your site is #wrapper and it is not relatively positioned.

    You should therefore add 

    #wrapper{
    position: relative;
}

    Or put the #headlogo inside the #header element which is relatively positioned.