Resize container DIV size according to content inside child DIV

Question

I've searched for a solution for my question but I haven't found it.
My case is, I have a DIV that acts like a container for a Post (for a project of mine, inside this post there are classes for the poster avatar, name, timestamp, text, etc). The problem is that, even though the DIV that has the text (post_text) resizes itself, the DIV that acts like a container doesn't, so this happen:

Prints for better understanding: http://imgur.com/a/j2HVX#0

This is my actual code:

<div class="post_container">
    <div class="post_who">
        <div class="post_avatar"><img src="avatar2.png" /></div>
        <div class="post_name">Solange Campolina</div>
        <div class="post_timestamp">03/04/15<br />15:34</div>
    </div>
        <div class="post_info">
            <div class="post_title">Trabalho sobre fotografia</div>
            <div class="post_text">RANDOM PORTUGUESE WORDS: É importante questionar o quanto a determinação clara de objetivos estende o alcance e a importância de alternativas às soluções ortodoxas. A prática cotidiana prova que o início da atividade geral de formação de atitudes cumpre um papel essencial na formulação dos relacionamentos verticais entre as hierarquias. No entanto, não podemos esquecer que a contínua expansão de nossa atividade é uma das consequências das posturas dos órgãos dirigentes com relação às suas atribuições. O cuidado em identificar pontos críticos no fenômeno da Internet auxilia a preparação e a composição do orçamento setorial.<span class="post_value">Valor: 3,0 E1AMP</span></div>            
        </div> 
        <div class="post_links">
            <a><div class="post_button">
                    <img src="icon_date.png" /><span>24/04/15</span>
            </div></a>
            <a href="#"><div class="post_button">
                    <img src="icon_attachment.png" /><span>1</span>
            </div></a>
            <a href="aluno_disciplinas_disciplina_comentarios.htm"><div class="post_button">
                <img src="icon_comment.png" /><span>3</span>
            </div></a>
        </div>
        <div class="post_divider"></div>          
</div>

This is the simplified code, only with the important parts:

<div class="post_container">
    <div class="post_who">
        <!--Content!-->
    </div>
    <div class="post_info">
        <div class="post_title"><!--Title!--></div>
        <div class="post_text"><!--Content (text goes here)!--><span class="post_value">Valor: 3,0 E1AMP</span></div>            
    </div> 
    <div class="post_links">
        <!--Buttons!-->
    </div>
    <div class="post_divider"><!--This is the light gray line that divides the posts!--></div>          
</div>

The CSS part:

/*Relevant classes:*/

.post_container{ 
position: relative;
min-height: 140px;
height: auto;
}       
.post_info{
position: absolute; 
display: inline-block; 
vertical-align: top; 
margin: 20px 20px 0px 20px; 
padding-bottom: 32px; 
width: 550px;
}
.post_links{
position: absolute;
bottom: 5;
left: 110px; 
}
.post_divider{ 
background-color: #e8e8e8;
height: 1px; 
width: 85%; 
position: absolute;
right: 0; 
bottom: 0;
}
.post_text{
height: auto; 
}

/*Other classes:*/

.post_who{ 
display: inline-block; 
margin: 10px; 
font-style: italic; 
font-size: 1.2em; 
text-align: center;
width: 75px; 
}
.post_avatar{
border: 1px solid whitesmoke; 
border-radius: 50%; 
overflow: hidden;
width: 60px;
height: 60px;
position: relative; 
bottom: 0px; 
margin: 15px 0 0 5px; 
}
.post_avatar img{ 
vertical-align: middle; 
display: block; 
width: 60px; 
min-width: 100%; 
min-height: 100%; 
}
.post_name{ 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
width: 65px;
}

The way I see, as the text grows in the 'post_text' DIV, the 'post_container' DIV should have it's height adjusted, since the height is set as auto. I tried setting an 'overflow: auto' to 'post_container' according to another question I saw here but all it did was add a scrollbar to it. I need to solve this without any scripts.

Fiddle: http://jsfiddle.net/3ck990zc/

Solution 1

Your child elements are absolutely positioned, so they are out of the content flow, so they do not contribute to the height of the parent container. Try removing absolute positioning.

Reference: http://www.w3.org/TR/CSS21/visuren.html#choose-position

Solution 2

Your .post_info class has position: absolute which makes the div to have no width and hight (that's how I like to say). Position absolute must be used only when necessary. In your case this can be avoided. But since you have wrote alot of CSS, I can suggest you to use Bootstrap classes like row (for the outer container and it will wrap everything you have inside with proper width and height) and the grid system (in order to place your colums width accordingly). Believe be, knowing Bootstrap is a must these days and for sure it can save you alot of pain.

I tryed to modify your fiddle and add some bootstrap class and remove some of yours and at the end my JSFiddle looks like this: https://jsfiddle.net/obwjrbhn/2/

Notice that I've been using jQuery in Frameworks & Extensions add a references in External Resources on the left menu for bootstrap.js and bootstrap.css. You can add them to your project by adding these in your head:

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

But this will make your web site loading slow, so what I suggest is to download jQuery and bootstrap and add a local refenrences in your project.

Good luck!

Solution 3

Here is what you need to do first of all do not position main container elements absolutely, rather float them and inside divs can be absolutely positioned, see adjusted css:

/*Relevant classes:*/

.post_container{ 
position: relative;
min-height: 140px;
height: auto;
}       
.post_info{
display: inline-block; 
vertical-align: top; 
margin: 20px 20px 0px 20px; 
padding-bottom: 32px; 
width: 550px;
float:left;
}
.post_links{
position: absolute;
bottom: 5;
left: 110px; 
}
.post_divider{ 
background-color: #e8e8e8;
height: 1px; 
width: 85%; 
right: 0; 
bottom: 0;
}
.post_text{
height: auto; 
}

/*Other classes:*/

.post_who{ 
display: inline-block; 
margin: 10px; 
font-style: italic; 
font-size: 1.2em; 
text-align: center;
width: 75px; 
float:left;
}
.post_avatar{
border: 1px solid whitesmoke; 
border-radius: 50%; 
overflow: hidden;
width: 60px;
height: 60px;
position: relative; 
bottom: 0px; 
margin: 15px 0 0 5px; 
}
.post_avatar img{ 
vertical-align: middle; 
display: block; 
width: 60px; 
min-width: 100%; 
min-height: 100%; 
}
.post_name{ 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
width: 65px;
}

Comments

[Marc Audet]

Your child elements are absolutely positioned, so they are out of the content flow, so they do not contribute to the height of the parent container. Try removing absolute positioning.

[Bruno Vaz]

Man I can't believe all this problem is only because of that, I'm trying to correct this for hours, it really was this. I really didn't knew that absolutely positioned elements didn't contribute to the height of the parent. Thanks!

[Bruno Vaz]

Thanks, only removing the absolute positioning did it, I didn't float it because 'display: inline-block;' do what the float would do and has it's advantages (as far as I know).

[Bruno Vaz]

Thanks for the tips, and yes I plan to use bootstrap but now I'm just creating pages to make an example for my project. The definitive files will have more organized coding and probably bootstrap.