CODEWITHSUNDEEP
htmlcss
AnApprentice
AnApprentice

Reputation: 111030

How to use CSS to position a div in the middle of the page while support a dynamic width?

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?

Upvotes: 0

Views: 107

Answers (2)

thirtydot
thirtydot

Reputation: 228202

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>

Upvotes: 1

jaypeagi
jaypeagi

Reputation: 3141

To prevent the banner covering the content try the following: http://jsfiddle.net/xv9Wq/21

Upvotes: 0

Related Questions