CODEWITHSUNDEEP
csspositioncss-positioncenterabsolute
Acidon
Acidon

Reputation: 1334

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...

Upvotes: 0

Views: 150

Answers (4)

web-tiki
web-tiki

Reputation: 103810

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.

Upvotes: 1

Gemma D Lou
Gemma D Lou

Reputation: 71

I took at the link of your site. One option is if you put your .headlogo inside the #header div instead (as below):

<div id="header">
    <div class="headlogo"><a href="/"></a></div>
    <!-- rest of the #header content here -->
</div>

...then change your css to:

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

Because your #header div as position:relative, any position:absolute div inside of it will be relative to it rather than the body. Therefore, when the window size reduces, it will still be relative to the header, not the body.

Upvotes: 0

Fiodor
Fiodor

Reputation: 806

You can do it easily with jQuery.

$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}

That should do fine :).

Upvotes: 0

David Routen
David Routen

Reputation: 349

The reason that requires the above change (position: relative; in a wrapper element) is that absolute positioning will only function if the first parent element is NOT static (default). If it's anything other than static, it should function correctly!

Upvotes: 0

Related Questions