CODEWITHSUNDEEP
htmlcss
Dominik
Dominik

Reputation: 4768

Overflowing Parent <div> in nested CSS

I managed to overflow a parent div which is a content wrapper with the following CSS, however now this div hides content behind it. How can I do this right?

jsfiddle: http://jsfiddle.net/YMSvU/

My HTML File

<div class="contentwrapper">
  <div class="promotional_outer">
    <div class="promotional">
    ...
    </div>
  </div>
  <div class="footer">
  ... this footer is overflown by the promotional div ...
  </div>
</div>

My CSS File

.contentwrapper {
    width: 1150px;
    text-align: left;
    margin: 0px auto;
}
.promotional_outer{
    background-color: #8fcbe5;
    position:absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}
.promotional {
    background-color: #30a3da;
    padding: 75px;
    color: #fff;
    width: 1000px;
    margin: 0px auto;
    clear: both;
}

This explains the issue

Upvotes: 0

Views: 138

Answers (5)

2507rkt3
2507rkt3

Reputation: 21802

I think it would be best to adjust your html to do something like this:

<div class="inner">
    <p>Content</p>
</div>

<div class="promo">
    <div class="promo--inner">
        <p>Content</p>
    </div>

    <div class="promo--callout">
        <p>Promo callout</p>
    </div>
</div>

<div class="inner  footer">
    <p>Footer content</p>
</div>

Check out this fiddle: http://jsfiddle.net/kFShb/2/

Upvotes: 1

Bill
Bill

Reputation: 3517

I had exactly the same problem on a site I'm working on at the moment.

Turns out the only solution is to do it like this:

<div class="wrapper">
    <div class="header">
    ...
    </div>
</div>
<div class="promotion_outer">
    <div class="wrapper">
        <div class="promotion_inner">
        ...
        </div>
    </div>
</div>

Upvotes: 1

Atrox111
Atrox111

Reputation: 527

Just delete position: absolute; and left: 0; in your CSS

.promotional_outer{
    background-color: #8fcbe5;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}

This should solve your problem.

Upvotes: 0

2507rkt3
2507rkt3

Reputation: 21802

Remove position: absolute from .promotional_outer.

Absolute positioning removes an element from the normal document flow.

Upvotes: 0

casraf
casraf

Reputation: 21684

You can bypass the element's flow by using z-index.

.footer {
    position: relative;
    z-index: 10;
}

Fiddle

Upvotes: 0

Related Questions