How to place an image at the right of a centered one

Question

Hi I'm trying to put an image next to a centered one

the code looks like this :

<div id="body3" >
    <center><img  HEIGHT="700" WIDTH="600" src="Logo.jpg"></center>
    <img height="40" width="220" ;" src="reserver.png" style="float: right;">
</div>

but the second image will go underneath the first one and to the right.I want it to be to the right of the centered one.

Any options? Thank you

Answer 1

Try this:

<div id="body3" >
    <center><img  HEIGHT="700" WIDTH="600" style="display: inline-block;" src="Logo.jpg">  <img height="40" width="220" style="display: inline-block;" src="reserver.png">  </center>

</div>

Answer 2

If I understood your question you want the minor box being aligned at after the big box and to the right? And don't want to "expand" the major box width. If is this your question, here's your solution:

1- Treat your #body3 as a wrapper to avoid your div quit the desired position.

2- Align your elements with margin: 0 auto; or text-align:center;

CSS

 img:nth-of-type(1){
        margin:0 auto;
        background:red;

    }
     img:nth-of-type(2){
        float:right;
    }

    #body3{
       margin:0 auto;
       width:600px;
    }

HTML

<div id="body3" >

    <img height="700" width="600" src="http://placehold.it/600x700">
     <img height="40" width="220" src="http://placehold.it/220x40">

</div>

https://jsfiddle.net/fvcee05a/1/

Answer 3

You can use css floats.

see example at https://jsfiddle.net/z3kwx1x5/1/

Learn more at https://css-tricks.com/all-about-floats/

<div id="body3" style="width:1200px;">
    <img style="float:left;margin-left: 220px;" height="700" width="600" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <img style="float:left;margin-top:330px;" height="40" width="220" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

Both images are floated left. If you want the first image to be centered, you can add margin-left to the inline style attribute. The value of the margin-left would depend on the width of the div#body3