FB Profile Cover Header

A simple version of the Facebook "cover" layout for the header on profile pages.

by abbylangner

HTML

<div class="container-outer">
  <img src="http://placekitten.com/150/200" />
  <div class="container-inner">
    <div class="top">
      Top Content. Try changing the size of the image to see how this widget is flexible to the content.
    </div>
    <div class="bottom">
      Bottom Content
    </div>
  </div>
</div>

CSS

.container-outer{
    background: #CCC;
    position: relative;
    overflow: hidden;
}
.container-outer:before{
    content: '';
    width: 100%;
    height: 30px; /*match height of .bottom*/
    position: absolute;
    left: 0;
    bottom: 0;
    background: #AAA;
}
.container-inner{
    float: left;
}
img{
    float: left;
    position: relative; /*need for z-index to apply*/
    margin: 10px;
    z-index: 1;
}
.top{
    padding-top: 10px;
}
.bottom{
    position: absolute;
    bottom: 0;    
    height: 30px; /*match height of .container-outer:before*/
}