Search code examples
csspositioningfixed

Position elements involving a fixed container

I'm trying to recreate a site-wide announcement similar to yours truly, stackoverflow.

http://jsfiddle.net/cuMDM/14/

I'm having two issues:

(1) I can't get the outer div element to appear below the announcement container.

(2) I want the announcement container element and the outer div element to be of the same width and both centered in the page.

Any help would be greatly appreciated.

Solution

  • The position:fixed on your announcement container means that both it and the outer container will have their top position at 0. You can add a margin or a position to the outer container to change this.

    The announcment container already has a width of 100%. Are you opposed to putting width:100% on the outer container, and then centering any content for it that you want using some other technique?