Make div resize automatically

Question

I have got div

     <div class="PF">  
                  <img src="img" class="FollowerPic">
                  <span>Name</span>
                  <div class="Text"></div>
                <div class="readURL">
                  <img src="../img/x.png"  class="closeP">
                  <img src="" class="readIMG"></div>
               </div>
    </div>

Now div with class "Text" and image with class "readIMG" are defined by user they can be 100px or 500 px height.

.PF{
    width: 600;
    height: auto;
    overflow: hidden;
    min-height: 500;
    span{
        position: absolute;
        font-family: sans-serif;
        font-size: 32;
        margin-left: 140;
        margin-top: 50;
    }
}

.readURL{
    margin-left: -19;
    margin-top: 100;
    width: 300;
    height: 260;
    position:absolute;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    display: none;  
    .readIMG{
        width:600px;
        // position:@Abs;
        margin:-55 19 100;
        height: inherit;
    }
    .closeP{
        position:@Abs;
        width: 40;
        margin-left: 180%;
        cursor:pointer;
    }
}

I have tried this code to the parent div but it does not want to resize it stays the same height

Also if you add a unit to 500. The property "min-height" of 500 on the parent means that the parent div will always be at least 500 in size. Perhaps you meant "max-height"? — cnorthfield, Apr 10 '16 at 17:05
Then your div maybe collapsing, I suggest posting the rest of your CSS for the surrounding elements that could influence your div of class PF http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing — cnorthfield, Apr 10 '16 at 17:14
if the span does not need to be absolute positioned then remove `position:absolute` from the span and remove the `min-height` property from it's parent, it should fix the issue — cnorthfield, Apr 10 '16 at 17:23
@papakia Yes now it resizes when i change "Text" but not image — Murad Emi, Apr 10 '16 at 17:26
what are the css properties and values applied to the classes `FollowerPic`, `closeP ` and `readIMG`? — cnorthfield, Apr 10 '16 at 17:30

score 0 · Answer 1 · answered Apr 10 '16 at 17:04

0

You need to set the units.

For example:

.PF{
    width: 600px;
    height: auto;
    overflow: hidden;
    min-height: 500px;
}

answered Apr 10 '16 at 17:04

nathan felix

396
1
8

score 0 · Answer 2 · answered Apr 10 '16 at 17:07

0

You forgot about "px" for height and width

  https: //plnkr.co/edit/qr1gUaeeWeLARIVDPg5B?p=preview

answered Apr 10 '16 at 17:07

Vlad

91
5

Omari Victor Omosa · Answer 3 · 2016-04-10T17:36:39.407

If you would want the divs to auto resize this would mean you want the screen to fit screen resize or even fit on different screens . Try to apply Percentages and media queries in order to work out

i.e.

.PF{
    min-width:100px;
    width:100%;
    max-width: 600px;
    height: auto;
    overflow: hidden;
    min-height: 500px;
    height: 100%;
}

And to make the images follow suit you may apply percentages onto the also

i.e.

 <div class="PF">  
              <img src="img" style="width:100%;" class="FollowerPic">
              <span>Name</span>
              <div class="Text">....

Alternatively: if you set height to 100%; it looks at the parents height. One way to do this is not even giving the child a height of 100% but I could also suggest You give the parent a style of relative position and the child an absolute position. then force it to fit the parent. i.e.

<style>
.parent
{
 height:100%; 
 min-height:500px; 
 position:relative;  
 display:block; 
 border:#093 solid 1px;  
}

.PF
{
 background-color:#999; 
 border:#939 solid 1px; 
 height:100%; 
 bottom:0; 
 position:absolute; 
 bottom:0; 
 top:0; 
 left:0; 
 right:0; 
 display:block;
}

</style>


<!--The parent-->
<div class="parent">

<!--The child-->
    <div class="PF">
                  <img src="img" class="FollowerPic">
                  <span>Name</span>
                  <div class="Text"></div>
                  <div class="readURL">
                  <img src="../img/x.png"  class="closeP">
                  <img src="" class="readIMG"></div>
                  </div>
 
    </div>
</div>

@MuradEmi Me i would prefer positioning to force it if height does not work — Omari Victor Omosa, Apr 10 '16 at 17:38

cnorthfield · Accepted Answer · 2016-04-10T17:33:18.917

0

Try the following:

.PF{
    width: 600px;
    height: auto;
    overflow: hidden;
    }
.PF span {
    font-family: sans-serif;
    font-size: 32px;
    margin-left: 140px;
    margin-top: 50px;
    }

It is good practice to use measurement units for your css properties or browsers will render the elements with default measurement values:

http://www.tutorialspoint.com/css/css_measurement_units.htm

edited Apr 10 '16 at 17:33

answered Apr 10 '16 at 17:25

cnorthfield

3,384
15
22

Yes now it resizes when i change "Text" but not image – Murad Emi Apr 10 '16 at 17:28

Make div resize automatically

4 Answers4