Resizing container div when inner div position changes - css

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; }