Solved

how to center a "position: fixed" div

Posted on 2009-04-07
5
6,953 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:
Steggs earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 6 49
Login area of a page 4 32
Getting Column Height to Match Other Column 5 44
Custom Form Design to Match this example 1 14
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

919 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now