Search code examples
csshtmlcss-floatparent-childparent

Expand parent to floating child div

I have a layout that is supposed to have several content boxes with a full width rotated div behind it. So far i've been able to create this jsfiddle example. Here is a simple sketch of what the layout is going to be: see here.

The problem is also explained with visual aid if you see my jsfiddle, but I'll shortly explain it here too.

The outer content box holds 2 child divs, one with the rotated div that wraps around properly around it's parent. And another inner-content box that is going to hold the content. With a fixed height it does work, but the content is going to be flexible. So it needs to stretch the parent div to the same height as it's parent.

I have tried several things with overflow, display, float etc. but nothing seems to be working.

This is how I've placed the divs:

<div class="content-outer">
    <div class="content-inner">Content comes here</div>
    <div class="extended rotation"></div>
</div>

Partial CSS

.content-outer {
    width: 100%;
    height: 100px; /* This should adjust to the inner-content height */
    background: #FF0000; /* Red */
    position: relative;
    display:block;
    float: left;
}

.content-inner {
    width: 100%;
    min-height: 100px;
    background: #00FF00; /* Green */
    float: left;
}

.extended { 
    height: 100%;
    margin: 0 -100%;
    top: -20px;
    background: #666; /* Gray */
    position: relative;
    z-index: -1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.rotation {
    transform:rotate(-2.5deg);
    -ms-transform:rotate(-2.5deg); /* IE 9 */
    -webkit-transform:rotate(-2.5deg); /* Safari en Chrome */
    -webkit-backface-visibility: hidden; /* Reduce jagged edge */
    outline: 1px solid transparent; /* Reduce jagged edge */
}

If any of my intentions are unclear, feel free to ask for more explanation!

Solution

  • If you have the content as child of the rotated box , they will both grow according to content.

    What you need is to set reversed rotation to child , so it sets back somehow to normal position. http://codepen.io/anon/pen/HrceA 

    .content-outer {
  margin:2em 0;
}
.extended {
  background:gray;
  padding:1em 0;
  transform:rotate(-2deg);
}
.content-inner {
  transform:rotate(2deg);/* opposite rotation makes to have 0deg rotation at screen*/
  background:#00FF00;
  padding:1em;
}

    <div class="content-outer">
     <div class="extended rotation">
        <div class="content-inner">
           Content comes here
        </div>
   </div>
</div>

    .content-outer could be the one rotated to avoid extra div for extra class :)

    EDIT transform:skewY(2deg); works too : 

    .extended {
  background:gray;
  padding:1em 0;
  transform:skewy(-2deg);
}
.content-inner {
  transform:skewy(2deg);
  background:#00FF00;
  padding:1em;
}

    http://codepen.io/anon/pen/mBhcF