Div height doesn't adjust to fit content

Question

How can I center a div horizontally and vertically and adjust height to fit content?

Here is my html code:

 <div class="sprite">
  </div>

 <div class="content">
     <span>close</span>
     <div class="centered">

         lorem lipsum.....

     </div>

 </div>

And css:

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0.6;
}

.content{
     border:1px solid red; 
     z-index:21; 
     position: absolute; 
     margin:auto; 
     padding:10px;
     left: 0px;
     top: 0px; 
     bottom:0px; 
     right:0px;
     height:30%; 
     width:30%;  
     text-align:center; 
}
.content span{
     position:absolute; 
     top:0px; 
     right:0px;}

.centered{
     height:100%; 
/* Internet Explorer 10 */
     display:-ms-flexbox;
     -ms-flex-pack:center;
     -ms-flex-align:center;

/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

/* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

/* W3C */
   display:box;
   box-pack:center;
   box-align:center;
}

This is what I want:

enter image description here

possible duplicate of [How to get a div to resize its height to fit container?](http://stackoverflow.com/questions/1230354/how-to-get-a-div-to-resize-its-height-to-fit-container) — Ciro Santilli OurBigBook.com, Sep 28 '15 at 06:53

score 10 · Answer 1 · answered Nov 28 '13 at 13:51

10

Edit .content class to have following css and remove position absolute

height:auto;
overflow:visible;

answered Nov 28 '13 at 13:51

Pradip Borde

2,516
4
18
20

NoobEditor · Answer 2 · 2013-11-28T14:39:10.570

1

In your .content class, remove

                         position: absolute;

                          and add

                          margin-top:24%;

to align it in vertically middle while taking the height of the content

absolute positioned attrib are rather difficult to style!

Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/

EDIT

Here you go mate

CSS to ammend :

  .sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
     width: 100%;
    /* height: 100%; */
    background-color: gray;
    opacity: 0.6;
    border:1px solid #FFF;
    text-align:center;
}

.content{
     border:1px solid red; 
     position:relative;
     z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
     margin:auto;
     padding:10px;
     width:30%;  
     margin-top:24%;
     text-align:center; 
}

.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}

Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/2/

Trick was to align a absolute <span> in relative content class....

edited Nov 28 '13 at 14:39

answered Nov 28 '13 at 13:44

NoobEditor

15,563
19
81
112

Unfortunately no. The close span must be in corner of div with class 'content' and the sprite covers my content div. – POIR Nov 28 '13 at 14:01
yeah...got it...lemme try! :) – NoobEditor Nov 28 '13 at 14:21
Thanks @Mayank! I'm waiting for the answer :) – POIR Nov 28 '13 at 14:24
The content div must be in center of page (so we cannot use margin-top:24%; should be margin:auto) And I still see that the sprite covers the content panel. Any idea? – POIR Nov 28 '13 at 14:30
final..edited code above...`http://jsfiddle.net/logintomyk/Xxfhn/2/` .....margin :0 will push it to top because of positioning... – NoobEditor Nov 28 '13 at 14:37
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42138/discussion-between-mayank-and-otix) – NoobEditor Nov 28 '13 at 14:39

score 0 · Answer 3 · answered Nov 28 '13 at 15:26

.content{
     border:1px solid red; 
     position:relative;

     margin:auto;
     padding:10px;
     width:30%;  
     margin-top:4%;
     text-align:center; 
}

.content span{position:absolute;right:0;top:0;text-align:right;}

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;

     width: 100%;

    background-color: gray;
    opacity: 0.6;
    border:1px solid #FFF;
    text-align:center;
}

does that help

score -1 · Answer 4 · answered Nov 28 '13 at 13:46

replace your css with mine...

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0.6;
}

.content{
     border:1px solid red; 
     z-index:21; 
     position: absolute; 
     margin:auto; 
     padding:10px;
     left: 0px;
     top: 0px; 
     bottom:0px; 
     right:0px;

     width:30%;  

     text-align:center; 
}

.content span{position:absolute; top:0px; right:0px;}

.centered{

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

The height of div with class content must be equal with height of div with class centered. In your case the height is 100%. — POIR, Nov 28 '13 at 13:53

score -2 · Answer 5 · answered Aug 24 '16 at 21:36

-2

You are making this hard on yourself, just change the Position to be Relative in the class content, see below;

 .content{
 border:1px solid red; 
 z-index:21; 
 position: absolute; 
 margin:auto; 
 padding:10px;
 left: 0px;
 top: 0px; 
 bottom:0px; 
 right:0px;
 height:30%; 
 width:30%;  
 text-align:center; 
 }

answered Aug 24 '16 at 21:36

CodingSince007

13
3

2

Your answer says `position: absolute; ` not relative. – Matt Mar 17 '19 at 16:11
Why are you commenting 6 months later? Kind of missed the timing on this @Matt. Plus I was mentioning what to fix and where if you read my comments. – CodingSince007 May 16 '19 at 21:48

Div height doesn't adjust to fit content

5 Answers5

Linked