Solved

how to center a "position: fixed" div

Posted on 2009-04-07
5
6,961 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
css icomoons will not display on page 14 33
css issues with IE 11 8 42
Changing Color of Page Section 4 24
Change of column alignment in div 2 23
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

838 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