Positioning child content outside of parent container

Question

I'm trying to visually position a DIV (article header) outside of it's parent DIV (article) container. Is this possible?

My mark-up example is available here - http://codepen.io/calebo/pen/CGoyD

Answer 1

Try this:

.main {
  background: tomato;
  float: left;
  width: 600px;
  margin-top: 30px;        /* above Layout adjustment */
  /* removed overflow: hidden; */
  /* use always clearfix method instead */
}
.article_header {
  background: SteelBlue;
  color: #fff;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;  /* to neutralize padding of parent container */
  left: -10px;          /* to neutralize padding of parent container */
  padding: 10px;        /* to neutralize padding of parent container */
  right: -330px;        /* to neutralize padding of parent container */
}
.main > article{
  position: relative;
}
.aside {
  background: cyan;
  float: right;
  width: 300px;
  margin-top: 30px;        /* above Layout adjustment */
}

Working Codepen

To make adjustments, play with margin property.

Answer 2

You could do it like this:

.inner-wrap {position: relative; overflow: visible;}

.inner-wrap:after {content:""; display:table; clear:both;}

.article_header {position: absolute; width: 940px; left: 0; bottom: 100%;}

I've removed the overflow: hidden and replaced it with a clearfix method.

Answer 3

Some thing like this can be done

<div class="wrapper">        
<h2>Desired effect</h2>

    <div class="inner-wrap">
        <div class="main">
            <article>
                <header class="article_header">article header - unknown height</header>
                <section class="article_body">article body</section>
            </article>
        </div>
        <div class="aside">aside</div>
    </div>
</div>

CSS

body {
    font-family: helvetica, arial, sans-serif;
}
.wrapper {
    margin:0 auto;
    width:80%;
}
h2 {
    text-align: center;
}
.inner-wrap {
    background: none repeat scroll 0 0 #CCCCCC;
    margin: 41px auto 0;
    position: relative;
    width: 940px;
}
.inner-wrap > * {
    padding: 10px;
}
.main {
    background: tomato;
    float: left;
    width: 600px;
}
.article_header {
    background: none repeat scroll 0 0 #4682B4;
    color: #FFFFFF;
    left: 0;
    padding: 1%;
    position: absolute;
    top: -39px;
    width: 98%;
}
.aside {
    background: cyan;
    float: right;
    width: 300px;
}

jsfiddle : http://jsfiddle.net/w26yw/1/ i.e: http://jsfiddle.net/w26yw/1/show/

Answer 4

Here's the cleanest solution. It is basically the original @Mr_Green answer with a little fix.

.main > article {
  position: relative;
}
.article_header {
  background: SteelBlue;
  color: #fff;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;  /* to neutralize padding of parent container */
  margin-left: -10px;   /* to neutralize padding of parent container */
  padding: 0px 10px;    /* to neutralize padding of parent container */
  width: 920px;
}
.inner-wrap {
  background: #ccc;
  width: 940px;
  margin: 0 auto;
  /* remove overflow: hidden */
}

Here's a working CodePen