调整页面大小后，div下降

Question

css:

  .desc{
        text-align: center;
        color:#60A8D5;
        padding-top: 17px;
        font-size: 14px; font-family: sans-serif;
        font-weight: normal;
        width: 400px;
        margin: 20px;
        display:inline-block;
        vertical-align: top;

        position: relative;
    }
    .twitter{
    background-image: url(http://guifff.com/wp-content/uploads/45_dribbble-twitter.gif);
        background-position: center; 
        margin-top: 210px;
        margin-left: 15%;
        margin-right: 7%;
        width: 78%;
        height: 270px;
        padding-top: 0px;
        text-align: right;
        position: relative;

    }

    .insegnanti{ 

        display:inline-block;
        width:auto;
        text-align: center;
        margin: 20px;
        padding: 5px;
        height: 200px;
        vertical-align: top;
        }

html part:

 <div class='insegnanti' id='i"+instructor[i].id+"'><img src='"+instructor[i].image+"' style='max-width:100%;height:auto'>
         <div class='desc'><b><p style='font-size:20px'>"+instructor[i].name+" "+instructor[i].surname+"</b></p><br><br>"+instructor[i].description+"
         </div>
  </div>

   <div class='twitter'><a class='twitter-timeline' href='https://twitter.com/"+instructor[i].twitter+"' data-widget-id='"+instructor[i].twitter_id+"'>Tweet di @"+instructor[i].twitter+"</a></div>

When i resize the page, the desc part going under twitter div. Without resize i see the img on the left and the desc on the right, and twitter at the bottom. When i resize i want twitter div goes down after the resize. How can i do it?

Answer 1

Remove margin-top: 210px; from .twitter , then remove height: 200px; from .insegnanti . And this seems to fix it.

Answer 2

Not sure exactly where you want to position your div. use the below CSS as a guide and modify it to suit your needs. Add margin-top and margin-bottom if needed.

#desc {
  position: absolute;
  margin-left: 25px;
  margin-right: -25px;
}

Hope this helps.