Centering a fluid width div within a fixed div to pin to top of viewport

Question

ok, so I'm designing a page that requires a 50% width div down the centre of the page - no problem. I also need a 50% wide header across the top of my screen - no problem. Finally I need to have that header in a fixed div so that it remains at the top of my screen when I scroll - and that's where I bump into a problem, no matter how hard I try I can't seem to get that top div centered presumably because it's a fluid width and I can't really specify a pixel margin?

Here's the code I've been working on (keeping things simple for now)....

<div id="wrapper">
    <div id="topwrapper">
        <div id="top">
            <div id="topleft"></div>
            <div id="topright"></div>
        </div>
    </div>
    <div id="table">
        Lorum Ipsum to fill here.
        <div id="left"></div>
        <div id="right"></div>
    </div>
</div>

And my CSS.....

#wrapper {
    overflow:         auto;
    position:         absolute;
    top:              0px;
    left:             0px;
    height:           100%;
    width:            100%;
    background-image: url('images/background.jpg');
}

#table {
    position:         relative;
    margin:           0 auto;
    width:            50%;
    background-image: url('images/midmiddle.png');
    padding:          50px;
    padding-top:      130px;
}

#topwrapper {
    position:    fixed;
    margin-left: -112px;
    left:        50%;
    width:       50%;
    z-index:     20;
    height:      169px;
}

#top {
    position:         relative;
    margin-left:      -8px;
    left:             -50%;
    width:            100%;
    background-image: url('images/topmiddle.png');
    z-index:          20;
    height:           169px;
    padding-left:     112px;
    padding-right:    112px;
}

#left {
    position:         absolute;
    margin-left:      -162px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midleft.png');
    z-index:          10;
}

#right {
    position:         absolute;
    right:            -112px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midright.png');
    z-index:          10;
}

#topleft {
    position:         absolute;
    margin-left:      -168px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topleft.png');
    z-index:          10;
}

#topright {
    position:         absolute;
    right:            -56px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topright.png');
    z-index:          10;
}

So I've got my main wrapper at 100% wide and high to take the lot, the topleft, topright, left and right divs are within the main div to repeat the sides of my box, but the top is where I'm stuck.

The code I've posted actually works but as you can see it's a very convoluted workaround, most margins are to do with my side image dimensions but the #top -8px is the only way I can seem to get around it to work - there must be an easier way?!

Many thanks in advance for any help :)

thanks for the input - sorry about the code formatting, I put four spaces before my CSS but I guess you guys like it in a list rather than line - sorry, old habits....!

I've managed to get it working to an extent again with putting a 25% left and right on the topwrapper, a 100% width on the top and margin of -120px......now looking at that (given that my images are 112px wide) I've picked up and extra 8px somewhere as can also be seen in the original code (margin-left of -8px). Very confused as to how that's in the equation....but it's working!

I'll have a look at that fiddle, not something I'm familiar with so looking forward to learning something new :)

Many thanks for your help everyone :)

Could you be so kind as to format your css in a readable fashion? Also, a [fiddle](http://jsfiddle.net) might be helpful. — Johannes Pille, May 03 '12 at 16:49
Welcome to Stack Overflow! Please format your code properly. A code block is inserted by indenting 4 spaces before any line of code. I've formatted the code for you this time, but please format it properly next time. For further help, see the [Editing FAQ](http://stackoverflow.com/editing-help#code) — Madara's Ghost, May 03 '12 at 16:53

score 0 · Answer 1 · answered May 03 '12 at 18:04

0

How about trying to set the margin to auto for #wrapper? Maybe the problem is that the wrapper hasn't been fixed in place, so maybe the #wrapper is moving, not the table?

answered May 03 '12 at 18:04

user1364441

85
1
8

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I did this by creating a fixed wrapper, then positioning the visible element as a child. See http://jsfiddle.net/LDVmu/

So, the HTML was

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

And the CSS I used was

#top {position: fixed; width: 100%;}

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

I know it's another nested div, and it's less semantic, but I think this is the only way this will work. The centering trick with absolute and fixed positioning and left/right=0 only seems to work with explicit pixel widths.

score 0 · Answer 3 · answered Nov 12 '15 at 11:04

I'm not sure from your question whether it's completely failing to centre-align (i.e. it's appearing on the left of the page) or if it's slightly off-centre, or as I suspect, almost completely over to the right.

#topwrapper has a width of 50% and also a left of 50%. So it starts halfway across the page and takes up half the page (the right half). Only that negative margin pushes it back in the correct direction at all. Instead of a negative margin, reduce left to 25%. Then you should no longer need the negative positioning / margin on #top.

It may still be just slightly off-centre after this. If so, that's probably because of the scrollbars appearing on #wrapper. #table adjusts to allow for them, #topwrapper doesn't (because it's fixed-position and so it only heeds what html and/or body are doing). The solution - for Chrome and Firefox at least, I've not tested it in others - is to make the scrollbar ever-present on html and never on body or #wrapper:

Change height to min-height in #wrapper, and add this:

html {
    margin:            0;
    height:            100%;
    overflow-y:        scroll;
}
body {
    margin:            0;
    min-height:        100%;
}

A couple of notes...

If you want #wrapper to have 100% height of the viewport, then body (and in most browsers html) need to have it too.
Your #table has padding-top of 130px but #topwrapper has a height of 169px so your Lorem Ipsum gets hidden underneath. I increased the padding-top to 180px.

Centering a fluid width div within a fixed div to pin to top of viewport

3 Answers3