Resizing container div when inner div position changes

Question

I've got a container div (the background in the picture below) and an inner div that contains images (social icons).

I want my images to overflow out of the bounds of the container div (as you can see in the image), but at the same time I want the container to resize: its height should decrease when my images overlap its top border. So there shouldn't be that lower empty border: the container behaves like if the images were fixed, while they are not.

Here's the image:

How can I do that?

EDIT: This is what I'd like to obtain (well, something like this I mean :P )

The height of the container div (the dark background you see) is dynamically set by its content.

Answer 1

try giving the position of inner div to position:absolute in relative with the parent div then you can play around with the inner divs by adjusting the top,left,bottom and right properties

// css

body{ background: url("http://1.bp.blogspot.com/-OowkzBiSOJU/Ud0G3T325lI/AAAAAAAACfY/syhVEMuuSOw/s1600/tiny_grid.png") repeat scroll 0 0 transparent; color: #666; height: 100%; padding: 0; font-family: 'Lora',Georgia,Serif; font-size: 18px; line-height: 29px; border-top: 5px solid #4690B3; }
.clr { clear:both; float:none; }
.ct-wrapper {    padding:0px 20px;    position:relative;    max-width:1230px;    margin: 0 auto;  }
.header-wrapper {
  background: #fff;  border-bottom: 1px solid #ccc;  display: inline-block;  float: left;  width: 100%;  }

/***** Optin Form CSS *****/
.opt-in .inner {  background: url("http://3.bp.blogspot.com/-YfUnP1wOFzQ/Ud0G21XXRWI/AAAAAAAACfQ/Hg5Gakd69tQ/s1600/home-bg.png") repeat scroll 0 0 transparent;  padding: 10px 0 0;  font-style: italic;  color: #ccc;  text-shadow: 0 1px 1px #000000; margin-top:50px;height:50px; }
.opt-in .opt-in-wrap {  margin-right: 40%; }
.opt-in .info {  float: left;  width: 80%;  }

/*****************************************
Responsive styles
******************************************/
@media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }
}
@media screen and (max-width: 960px) {
.ct-wrapper{    padding:0 15px;  }
.main-wrapper, .opt-in .opt-in-wrap{    margin-right:0;    width:100%;  }
.sidebar-wrapper{  float: left; width: auto;  margin-left: 20px;  }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper {  padding: 0 48px; }
.opt-in .info {  text-align: center;   }
.opt-in .signup-form {  margin-top: 30px;  width: 95%;  float: left;  }
#subbox {  width: 60%;  }
}
@media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
}
@media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper {  padding: 0 10px; }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{    display:block;    float:none;    }
.comments .comments-content .comment-header {    height:70px;    }
}
@media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{  max-width: 220px; }
.comments .comments-content .comment-replies {    margin-left: 0;    }
}
/*****************************************
Hiding Header Date and Feed Links
******************************************/
h2.date-header{display:none;}

.opt-in .social-div {  
    background: rgba(0, 0, 0, 0.0);  
    border: none;  
    float: right;  
    font-size: 16px; 
    text-align: center; 
    position: absolute;
    top: -55px;


}
.opt-in .social-div .form-inner {  font-size: 16px;    margin: 35px;  }