Question

I’m toying around with a position:fixed layout. However, it look too wide, so I though I would simply put my page inside a container with a max-width property, but it doesn’t work, fixed elements take the viewport top/bottom/left/right position of the viewport and not of the parent, although they are positionned where I want them if a position is not defined.

I’d like to have 2 fixed elements at the top of my page, contained inside a max-width.
first element aligned to the left (no left:0px required)
second element aligned to the right (right:0px required (or something else?)

Could I redefine the viewport?
Do you see any alternative?

Test case code :

Note : stuff2 yellow background needs to be aligned with the .page background.

html

<div class="page">
    <div class="header1">
        stuff1
    </div>
    <div class="header2">
        stuff2
    </div>
    other stuff1<br />
    other stuff2<br />
    other stuff3<br />
    other stuff4<br />
    other stuff5<br />
</div>

css

html,body {padding:0px;margin:0px;height:100%}

.page {
    max-width:700px;
    margin:0px auto;
    background:#ffddff;
    min-height:100%;
}

.header1 {
    position:fixed;
    top:0px;
    background:#eeffff;
    max-width:700px;
    width:100%;
    height:50px;
}

.header2 {
    position:fixed;
    top:0px;
    background:#ffffee;
    max-width:700px;
    width:30%;
    height:50px;
    right:0px;
}

Answer 1

This is closer but might not be quite right. I’ll work on it more later if this doesn’t work for you:

http://jsfiddle.net/A5NX9/