CODEWITHSUNDEEP
cssheight
András Dzsida Szente
András Dzsida Szente

Reputation: 81

height:auto not working properly, div doesn't expand with content

I ran into a problem, while creating a column for messages on my website. Probably every message will be different lengths, so the divs' height contains them should be automatic. Somehow it is not working. Could you please tell me, which part of my code causes the problem? The container div doesn't expand with the content.

Here is the demo

CSS:

.ConvoCol2 {
width: 600px;
bottom:-50px;
position:absolute;
/*max-height:98vh;*/
margin-left: 0px;
height:91.95vh;
background-color:white;
display:inline-block;
padding-bottom:100px;}

.Typer {
width: 600px;
bottom:0px;
position:absolute;
/*max-height:98vh;*/
left: 0px;
height:100px;
background-color:black;
z-index:2;
padding-bottom:100px;}

.messageblock {
border: 1px solid lightgrey;
width: 600px;
position:relative;
top:0px;
left:0px;
min-height: 20px;
height:auto;}

.messageid {
left: 10px;
position:absolute;
top:10px;
}

.messageid p {
font-family:Arial;
font-size: 1em;
top: -15px;
display:inline-block;
position:absolute;
width: 200px;
font-weight:bold;
left: 65px;}

.msgcontent {
width: 560px;
font-family:Arial;
position:absolute;
left:30px;
top: 60px;
height:auto;
min-height: 30px;
word-wrap:break-word;}

.messageid img {
height:40px;
width:40px;
left: 20px;
}

HTML:

     <div class="ConvoCol2">
            <div class="messageblock">
                <div class="messageid">
                    <img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" />
                    <p> Name Here</p>

                </div>
                <div class="msgcontent">
                   asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas
                </div>
            </div>


            <div class="Typer">

            </div>
        </div>

Thank you.

Upvotes: 1

Views: 2105

Answers (1)

Anima-t3d
Anima-t3d

Reputation: 3565

The moment you use position:absolute or position:fixed it will be cut out and placed on a new layer (if you would compare it with how photoshop works), therefore your browser does not "know" the dimensions anymore and will simply give it 0 height when positioning the other elements. Or as @Terry commented:

It will remove elements from the document flow/layout and will not interfere with the positioning of other elements, or the dimensions of their parent(s).

position:absolute;
left:30px;
top: 60px;

Can for example be replaced with:

margin-left:30px;
margin-top:60px;

Upvotes: 3

Related Questions