Image moving to bottom of text when resizing window

Question

For one of my webpages, I am finding that when I resize the window, the picture I have on the right side of the page (at full screen) will resize and move to the bottom of the text. How do I keep this image stationary so that when I resize it, it doesn't move but a scroll bar will appear allowing the user to scroll to the right to see the image? Please find my code below:

<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> words:</span></h3>
                 <span id="picture"></span>
                 <h4 id="blockquoteField"></h4>             
                <div id="density"></div>
              </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "image.png" alt = "right picture" style = "height: 580px;"> <!-- original height = 580 px, width = 780px -->
        </div>
        <div class="col-md-1">
        </div>
</div>

Answer 1

It is happening because bootstrap is changing the columns to full width on smaller screens. In order to keep your current style change col-md 's to col-xs 's

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-xs-1"> </div> <div class="col-md-6 col-xs-6"> <div class="row"> <div id="info"> <h3 id="rank"><span style="color:orange"> words:</span></h3> <span id="picture"></span> <h4 id="blockquoteField"></h4> <div id="density"></div> </div> </div> </div> <div class="col-xs-4"> <img src="http://placehold.it/800x580" alt="right picture" style="height: 580px;"> <!-- original height = 580 px, width = 780px --> </div> <div class="col-xs-1"> </div> </div> 

With Responsive Image

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div id="info"> <h3 id="rank"><span style="color:orange"> words:</span></h3> <span id="picture"></span> <h4 id="blockquoteField"></h4> <div id="density"></div> </div> </div> <div class="col-xs-6"> <img src="http://placehold.it/780x580" alt="right picture" class="img-responsive"> <!-- original height = 580 px, width = 780px --> </div> </div> </div> 

Answer 2

give your fixed size, i assumed you wany your image doesnt resize it self and stay where it is when you resize the window

to make image not resizing give it a fixed size like

<img src="http://placehold.it/800x580" alt="right picture" style="height: 580px; width:780px;">

in order to make the image stationery you must also make fixed size in your <div> property and body depending in your code main tag

Answer 3

Sorry If I don't understand your question correctly. I assume from the title: Image moving to bottom of text when resizing window

Do you want to vertically align the image and the text and make them to the next to each other whenever we resize the browser?

here is my code:

html:

<div class="row margin-center" id="center">
    <div class="col-md-1">
    </div>
    <div class="col-md-6 align-div" >
      <div class="row">
          <div id="info">
            <h3 id="rank"><span style = "color:orange"> words:</span></h3>
             <span id="picture"></span>
             <h4 id="blockquoteField"></h4>             
            <div id="density"></div>
          </div>
      </div>
    </div>
    <div class = "col-md-4 align-div" id="image-margin">
          <!-- I am using placeholder with your desired height-->
         <img src = "http://via.placeholder.com/580x780" alt = "right picture" class="img-valign"> <!-- original height = 580 px, width = 780px -->
    </div>
    <div class="col-md-1">
    </div>

css:

#center {
    width:1000px;
}
#image-margin{
  margin-left: 100px;
}
.align-div {
    vertical-align: middle;
    display: inline-block;

}

I make the width 1000px to make it larger so it will not stack up if we resize

the div is block level, and it will stack up each other, so I use inline-block, to align them

vertical align middle to make the text be centered vertically with the div box

source: How to make two div align side by side?

How to vertically align a DIV next to an image?

codepen: https://codepen.io/ronalto7777/pen/brgjRe