CODEWITHSUNDEEP
htmlcssheight
NielsDePils
NielsDePils

Reputation: 251

Elements do not expand to contain child content

I am building a forum and therefore I am building a preview of a new post. It is also for the layout of each post on my forum. When I added some text to my paragraph it becomes longer the more I add, but that's not my problem like I asked before.

My problem is as you can see in the code below (full page view) that the container does not grow by adding text to my paragraph. I just put in some dummy text so that you can see what my problem is. 

#prevContainer {
    width:95%;
    background-color:white;
    opacity:1;
    border-radius: 10px;
    margin:0 auto;
    min-height:150px;
    height:auto;
    margin-top: 10px;
    margin-bottom:10px;
    border:2px solid grey;
}
#prevContainer #left {
    border-right:2px solid grey;
    width: 120px;
    min-height:150px;
    height:auto;
    float:left;
}
#prevContainer #left #prevAvatar {
    border:1px solid black;
    border-radius:10px;
    margin:0 auto;
    width:100px;
    margin-left:10px;
    margin-top:0px;
}
#prevContainer #right {
    float:left;
    margin-left:0px;
    margin-top:0px;
    min-height: 150px;
    height:auto;
    min-width:200px;
    width:500px;
    max-width: 517px;
}
#prevContainer #right #text {
    margin-left:10px;
}
#prevContainer #right #text #prevOutput {
    background-color:yellow;
    white-space: pre-wrap;
    word-break: break-all;
    font-size:16px;
}
<div id="prevContainer">
                                <div id="left">
                                    <img id="prevAvatar" src="" alt="Avatar"/>
                                </div>
                                <div id="right">
                                    <div id="text">
                                        <p id="prevOutput">
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS 
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        
                                        
                                        
                                        </p>
                                    </div>
                                    <!--<button id="button">New Post</button>-->
                                </div>
                            </div>

Thanks in advance

Upvotes: 0

Views: 81

Answers (2)

Clive_Bigsby
Clive_Bigsby

Reputation: 189

Add top and bottom padding to the containers that the text goes in.

Upvotes: -1

Kaloyan
Kaloyan

Reputation: 7352

You are not clearing the floats. You can add overflow: hidden; to #prevContainer or use:

#prevContainer:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Upvotes: 3

Related Questions