Question

please see the jsFiddle here: http://jsfiddle.net/xv9Wq/9/

What I’m trying to do is create a header banner that is centered and supports a dynamic width.

Previously, I had a header banner wrapper that was width 100% to then center the header banner. The problem with that is then the banner blocks the page beneath the header banner.

How can I position the header banner in the center of the page while supporting a dynamic content length inside the header banner?

Answer 1

You can’t center an absolutely positioned element with an unknown width, so here’s a workaround.

See: http://jsfiddle.net/thirtydot/xv9Wq/25/

CSS:

#headerBanner {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 40px;
    z-index: 2;
    height: 0;
}
#headerBanner > div {
    background: red;
    display: inline-block;
    /* if ie7 support is desired: */
    *display: inline;
    zoom: 1;
}

HTML:

<div id="headerBanner">
    <div>Centered on page. Supporting dynamic width.</div>
</div>