Question

I’m in trouble to move down other div s under the main div with text when the texts are increased.I tried so many times with css. when the text are increased with lot of enter pressing the text div height will increased but other dives doesn’t move. I’m sorry about my English. What can I do for this?

this is before inserting text
https://i.stack.imgur.com/SeY8Y.png

this is after inserting text
https://i.stack.imgur.com/k5Ik6.png

this is my code

    <div style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"></div>
<span style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"><strong>Tomorrow can be too late..</strong></span>
<div style="width:100px; height:30px; background-color:#FBC81A; position:absolute; left: 757px; top: 40px; border-bottom-left-radius:5px;z-index:1;">
  <div style="width:50px;height:30px; position:absolute; padding-top:3px;padding-left:13px;">
    <input type="submit" name="btn_report" id="btn_report" value="" style="background-image:url(images/report.png);background-repeat:no-repeat;width:23px;height:23px;border:none;background-color:#FBC81A;cursor:pointer;" title="Report this post" />
  </div>
<div style="width:50px; height:30px; position:absolute; left: 50px; background-color:#0C0; top: 0px;text-align:center;">
<div style="margin-top:7px;color:#FFF;font-weight:bold;cursor:pointer;" title="Post reputations">102</div>

</div></div>
  <div style="width:795px; min-height:340px; background-color:#F3F8F8; position:absolute ; left: 59px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 40px;  border-left:3px #0099FF solid;border-right:3px #0099FF solid;" >
    <p>sds</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>sad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>ds</p>
    <p>ad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>d</p>
    <p>dsa</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
  </div>
  <div style="width:800px; min-height:25px; background-color:#0099FF; position:absolute; left: 60px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 355px;" ></div>
   <div style="width:798px; min-height:20px;  position:absolute; left: 62px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 380px;background-image:url(shadow_9.png);background-repeat:no-repeat;"  ></div>
</div>

Answer 1

It’s because of the position: absolute, left: 60px and top: 355px. This way the container will always be on the same position on the screen. U will have to use position: relative, use margin instead of left and right. Also the div is not nested correctly.

Take a look at http://jsfiddle.net/skeurentjes/2xd88/1/

It think it works the way you want it to.