How to align image next to block of text?

Question

I am trying to align an image next to a block of text. However the image stays on the bottom of the page while the text is slightly higher. I am not quite sure what to do. Thank you for your time!

HTML & CSS

  body { margin: 0px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: mediumblue; font-family: monospace; font-size: 15px; text-align: center; width: 100%; top: 0; } li { display: inline-block; } li a { display: block; color: white; padding: 14px 75px; text-decoration: none; } li a:hover:not(.active) { background-color: darkblue; font-style: italic; font-size: 20px; } img { position: relative; display: block; } h2 { position: absolute; top: 190px; text-align: center; width: 100%; font-size: 65px; color: white; font-family: sans-serif; font-style: italic; } h3 { position: absolute; top: 265px; text-align: center; width: 100%; font-size: 65px; color: white; font-family: sans-serif; font-style: italic; } h4 { position: absolute; text-align: center; font-family: sans-serif; font-style: italic; width: 100%; font-size: 60px; top: 700px; } h1{ font-size: 20px; font-family: 'Roboto'; position: absolute; text-align: left; top: 900px; margin-left: 150px; margin-right: 150px; } #pformat{ text-align: right; font-family: sans-serif; margin-right: 30px; font-style: italic; font-size: 55px; margin-left: 620px; } #opaque { opacity: .2; } #divp { font-size: 20px; font-family: 'Roboto'; position: absolute; text-align: left; top: 1000px; margin-left: 150px; margin-right: 150px; font-weight: bold; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <title> </title> </head> <body> <!-- Navigation Bar --> <ul> <li> <a href="test_webpage.html#about">ABOUT </a> </li> <li> <a href="test_webpage.html#coupons">COUPONS </a> </li> <li> <a href="test_webpage.html#feedback">FEEDBACK </a> </li> </ul> <img src="https://preview.ibb.co/dr3y7v/vintage.png" height="660px" width="100%"> <h2> <span style="background-color: rgba(26, 102, 255, 0.75)">BRINGING YOU CONVENIENCE </span> </h2> <h3> <span style="background-color: rgba(26, 102, 255, 0.75)">SINCE THE 2000's </span> </h3> <div id='about'> <a id="about" name='about'> <div id='opaque'> <img src="https://preview.ibb.co/bS5nja/gas_station_hero_image.jpg" height="600px" width="100%"> </div> <h4>WHO WE ARE </h4> <h1>We are a small convenience store located in the heart of Cary, North Carolina. We specialize in craft beer and exquisite wine. We have all your quick grocery needs. We have the best prices in our area guaranteed! Come visit us for a truly enlightening experience! We are on Google so if you want to see our reviews or give us one, you can! </h1> <div id='divp'> <p>You might be wondering, why should I come here? What makes this gas station different from other gas stations? Well, with excellent staff, low prices, and clean floors, the better question should be, why shouldn't I come here! We hope you come to our store and have a fabulous experience. If you do experience any difficulties during your time here, please feel free to contact the Manager. He will resolve your complaints in no time! </p> </div> </a> </div> <div id='coupons'> <a id="coupons" name='coupons'> <div id='pformat'> <p>Here is a coupon just for you! Simply open the QR code and show it to the cashier so he/she can scan it! </p> </div> <img src="https://preview.ibb.co/jBYUxv/coupon1.png" height="300px" width="600"> </a> </div> <div id='feedback'> <a id="feedback" name='feedback'> </a> </div> </body> </html>

EDIT: I AM SORRY that this wasn't clear but I am takling about the QR code image on the bottom of the page! Thank you for your understanding.

Answer 1

use div tag to wrap the img tag and put that above #pformat and apply style float:left

 <div id='coupons'>
   <a id="coupons" name='coupons'>
     <div style="float:left">   
      <img src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
     </div>      
    <div id='pformat'>
     <p>Here is a coupon just for you! Simply open the QR code and show it to the cashier so he/she can scan it! 
     </p>
    </div>

      </a>
    </div>

Answer 2

i think you want to align the qrcode image...you can do it in 2 ways according to the placement you want to give:

<div id='coupons'>
  <a id="coupons" name='coupons'>
    <div id='pformat'>
      <p>Here is a coupon just for you! Simply open the QR code and show it to the cashier so he/she can scan it! 
      </p>         
    </div>
    <img id="qr" src="https://preview.ibb.co/jBYUxv/coupon1.png" height="300px" width="600">
   </a> 
</div>

Placement 1 -

#pformat {
    text-align: right;
    font-family: sans-serif;
    margin-right: 30px;
    font-style: italic;
    font-size: 55px;
    float: right;
    width: 800px;
}
#qr {
margin-top: 30px;
}

placement 2 -

#pformat {
    text-align: right;
    font-family: sans-serif;
    margin-right: 30px;
    font-style: italic;
    font-size: 55px;
    float: left;
    width: 800px;
}
#qr {
margin-top: 30px;
}

How to align image next to block of text?

Question

2 answers

solution1
0 ACCPTED 2017-07-14 04:43:21

solution2
0 2017-07-14 04:43:29

How to align image next to block of text?

Question

2 answers

solution1 0 ACCPTED 2017-07-14 04:43:21

solution2 0 2017-07-14 04:43:29

solution1
0 ACCPTED 2017-07-14 04:43:21

solution2
0 2017-07-14 04:43:29