Fixed sidebar is on top of header.

[alosGs]

Hi, when i use position: fixed; on sidebar, the content goes top of the header which is above the sidebar. How can I make the fixed sidebar to start after the header?
Thanks a lot.

#wrapper {
width: 97%;
}

#header {
width: 97%;
float: left;
}

#content {
width: 80%;
float: right;
}

#sidebar {
width: 15%;
float: left;
position: fixed;
}

#footer {
width: 97%;
float: left;
}

[edited by: encyclo at 8:35 pm (utc) on Nov. 14, 2009]
[edit reason] no screenshots please [/edit]

[D_Blackwell]

Welcome alosGs. The personal link is going to get chopped, so I cannot use it as a reference.

Without the HTML is not possible to replicate the problem, but the first thing that I see is floats everywhere. clear: is probably going to be needed somewhere.?

The width: and float: on #header and #footer need a look also I would think.

[alosGs]

Thanks a lot D_Blackwell,
Removing float: left; from header solved it. Its ludicrous that I didn't try that. :p

Thanks again.

[swa66]

Having both "float: left;" and "position: fixed;" is confusing (for me at least). The concept of floating and that of fixed position is hard to put together on the same element for me.

I'd recommend to not float elements with absolute (or fixed) positioning and use the top/right/bottom/left properties to place them were you need them instead.

I looked it up in the standard what a browser is supposed to do when an element is both floated and given absolute positioning:
[w3.org...]

Basically the browser is told to ignore the float:

If 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none' [...] The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

[alosGs]

Thanks a lot for your information swa66.

By the way now I have a new problem. Since I use "fixed" positioning to sidebar, "normal flow" ability is gone, so that footer's position is determined only by content, not "sidebar OR content".
So if the height of the content is shorter than the sidebar, sidebar overlaps the footer.

Any idea? :(

[swa66]

In CSS absolutely positioned element have *no* influence over the positioning of in-flow elements.
The moment you went for position:fixed;, you opted to control the size of the fixed element and guarantee it will fit on the user's display yourself as the user has no more scroll functionality to get it back onto the screen. And that's NOT easy to achieve.

Similarly you gave up -as far as CSS is concerned- the ability for other elements to take into account in any way where that element is placed.

If you seek a 2 column layout I'd not go for position:absolute all that easy (and certainly not for position:fixed).

You could try to make the footer stick to the bottom and make sure the sidebar doesn't go that far down. Tip: you can set both top and bottom of the absolutely positioned element.

More traditional 2 column layout optios are probably better suited for what you seek to do.

BTW: position:fixed isn;t supported by IE6, you need to solve that one somehow.