?
Solved

how to center a "position: fixed" div

Posted on 2009-04-07
5
Medium Priority
?
6,973 Views
Last Modified: 2012-05-06
I have a header div that I want to position on the top of the window, and stay centered. I also want it to have position: fixed so it'll say fixed while the surfer scrolls the page. Inside of it, there's two anchor elements.

Initially, judging from the URL

http://www.raffaello-network.com/raffties/orange/index.php

the fixed DIV seems indeed centered, but really it is not. The proof is that the 2 anchors inside should be contained inside the position: fixed div but they are not. I gave this div a width: 100%, thinking that it would expand 100%, yes, but inside the parent DIV which has a fixed width of 956px and outside of it. The logics should be: if a parent has a width of 1000px the child DIV can't be larger than 1000px

Any solution?
CSS:
#########
 
#orange {
	width: 956px;
	height: 32px;
	z-index: 15;
}
 
#homepages {
	background: url(../images/top/background.gif) no-repeat center;
	width: 100%;
	height: 32px;
	position: fixed;
	top: 0;
	left: 0;
}
 
#orange a.orangehomepage {
	font-size: 13px;
	line-height: 13px;
	text-indent: -9999px;
	background-image: url(../images/top/raffaello-orange-homepage.gif);
	width: 417px;
	height: 13px;
	display: block;
	float: left;
}
 
#orange a.bluehomepage {
	font-size: 13px;
	line-height: 13px;
	text-indent: -9999px;
	background-image: url(../images/top/raffaello-blue-homepage.gif);
	width: 452px;
	height: 12px;
	display: block;
	float: left;
}
 
##########
 
HTML
 
##########
 
<div id="orange">
<div id="homepages">
<a class="orangehomepage" href="http://www.raffaello-network.com/raffties/orange/index.php" title="Raffaello Network Orange - Top Fashion Designers at discount prices">RAFFAELLO NETWORK ORANGE</a>
<a class="bluehomepage" href="http://www.raffaello-network.com/raffties/index.php" title="Raffaello Network Blue - Top Fashion Designers Spring/Summer 2009 Collection">RAFFAELLO NETWORK BLUE</a>
</div>
</div>

Open in new window

0
Comment
Question by:raffaello-network
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 24090577
Hello,

You would need a container inside your position fixed div

<div style="height:32px;position:fixed;width:100%">
  <div style="height:32px;margin:0 auto;width:950px"> this div will be centered in the browser</div>
</div>

Try that
0
 

Author Comment

by:raffaello-network
ID: 24090670
This is excellent, Steggs! thank you for the help!

Just, now the issue is that, the centered DIV is some pixels below the top of the window, how come? I didn't put any margin: XXXpx neither in the parent nor the child div
0
 
LVL 30

Expert Comment

by:Steggs
ID: 24090697
looks like you need to add top:0; to #orange
0
 

Author Comment

by:raffaello-network
ID: 24090715
that's just fantastic, yeah! Thank you again, Steggs. Thought making no declaration wouldbe considered as defaulto 0px, oh well

5 star! thx!
0
 
LVL 30

Expert Comment

by:Steggs
ID: 24090736
:D :D :D :D  YOUR WELCOME   WOOOOHOOOO!  YEAAHHHHHHHHHH!     WOOP WOOP!!!!!!!!!!!!!!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month11 days, 14 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question