Positioning child content outside of parent container - html

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