Center header element with position fixed to top of page

Question

I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.

The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.

The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.

    <body>
    <!--this should not need any css coding till later on after the site is complete-->
    <center>
        <div class="header_p1">
            <img class="header_p1_child" src="header.png"/>
        </div>
    </center>

and the css is

.header_p1
{
        background: white;
        width: 750px;
        height: 110px;
        margin-bottom: 10px;
}
.header_p1_child
{
        float: none;
        background: white;
        width: 750px;
        height: 110px;
        position: fixed;
        top: 0px;

}

btw the float attribute does nothing anyway i forgot to take it out and the parenting div as to be there otherwise it will disappear if you scroll down the page soory i didnt say that — , Apr 27 '13 at 11:43

score 9 · Accepted Answer · answered Apr 27 '13 at 16:19

You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.

Here is the prototype HTML snippet:

<div class="wrapper">
    <div class="header">
        <img class="banner" src="http://placehold.it/200x100" />
    </div>
    <div class="content">
        <p>Lorem ipsum dolor ...</p>
    </div>
</div>

I created a div.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.

The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.

The layout and styling is defined in the following CSS:

.wrapper {
    outline: 2px dotted blue; /** optional **/

    /** Top padding so that initially, the content is below the header **/
    padding-top: 100px;

}

.header {
    height: 100px;
    width: 400px; /** Use 100% to fill the width of the page **/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: rgba(0,0,255,0.2);
}

img.banner {
    display: block;
    margin: 0 auto;
}

The .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.

To center the element, set left: 0 and right: 0 and use margin: 0 auto.

Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.

I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.

Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/

i tested it it out in ie9 and the code does not work its great in chrome though can you figure out if there is any code that can be added to make it compatible ? — , Apr 28 '13 at 09:08
I just checked the fiddle in IE 9.0.8112 and it seems to work okay. If you coded the snippet in your web page, what doc type are you using? make sure you are not in quirks mode. (1) Double check the fiddle first in your IE9 to make sure that is fine and (2) let me know what doc type you are using. I will be back later today and can try to resolve anything. — Marc Audet, Apr 28 '13 at 10:51

dtech · Answer 2 · 2013-04-27T12:31:23.070

Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

DO NOT USE <center> tag, this is outdated and should be done with CSS

<body>
<div class="header_p1"><img src="header.png"/></div></center>

CSS

.header_p1
{
    background: white;
    width: 750px;
    height: 110px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
    left: 50%;           /* Start at 50% of browser window */
    margin-left: -325px; /* Go half of width to the left, centering the element */
}

score 1 · Answer 3 · answered Apr 27 '13 at 12:24

1

Orignally taken from here In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:

enter image description here

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

enter image description here

answered Apr 27 '13 at 12:24

The Mechanic

2,301
1
26
37

this is really only usaefull for when i get to the gallery and product pages css but im going to use it regardless that it didnt get the desired reults thank you – Apr 28 '13 at 09:22

Center header element with position fixed to top of page

3 Answers3

Linked