?
Solved

how to center a "position: fixed" div

Posted on 2009-04-07
5
Medium Priority
?
6,984 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
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
Mark Steggles 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:Mark Steggles
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:Mark Steggles
ID: 24090736
:D :D :D :D  YOUR WELCOME   WOOOOHOOOO!  YEAAHHHHHHHHHH!     WOOP WOOP!!!!!!!!!!!!!!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month16 days, 16 hours left to enroll

862 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