How to get 2 pictures to appear side by side is this html example?

Question

How do I get 2 pictures to appear side by side in this particular html example?

Here is my fiddle

What I want is to align pictures side by side in html, and similarly for the h1 tag above and the p tag below the pic.

illustration of what I want:

title0------------title1
pic0--------------pic1
word0-------------word1
^^^^^^^^^^^^^^^^^^^^^^^^^

This is an example of what I want fiddle, but here it doesn't work when I want add the h1 tag above and the p tag below the picture. I do, however like the way margin-right can control the lateral distance between the pics.

Here is a similar question but this is slightly different.

EDIT1 here is the bootstrap version mentioned below

EDIT2 here are other solutions from below

Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
YoYo - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/

they all offer a solution but I think the bootstrap version is the best as it handles when the screen width is resized the best.tks

Are you opposed to using something like Bootstrap? If not, you could just use the grid system. See here: https://getbootstrap.com/examples/grid/ — Dandy, Jan 26 '16 at 01:45

score 3 · Answer 1 · answered Jan 26 '16 at 01:51

3

You can use display:inline-block; to set the element to just use the width they have. Normally, h1 or div are the display:block; elements.

Here is the fiddle for you.

answered Jan 26 '16 at 01:51

Mg Thar

1,084
8
24

score 1 · Answer 2 · edited May 23 '17 at 12:30

Side-by-side positioning is simple and easy with flexbox.

Here's all you need:

#container {
    display: flex;
    text-align: center;  /* optional */
}

<div id="container">

    <section>
        <h1 class="left">title0 </h1>
        <img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
        <p class="left"><a>word0</a></p>
    </section>

    <section>
        <h1 class="right">title1 </h1>
        <img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
        <p class="right"><a>word0</a></p>
    </section>

</div>

There are various options for aligning the two sections in the row (center, space-between, flex-start, etc.). See here for details: https://stackoverflow.com/a/33856609/3597276

Learn more about flexbox here: A Complete Guide to Flexbox

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

pretty much what I wanted initially, but then when you change the screen size, bootstrap seem to handle this scenario best. — HattrickNZ, Jan 26 '16 at 19:37

score 1 · Answer 3 · answered Jan 26 '16 at 02:03

1

What you can do is put title0, pic0, and word0 in a div and add a class to the div so you can float it to the left using css. On the other side you have title1, pic1, and word1 in a div that has a class that would float it to the right.

Here's the float in work:

.leftBlock {
     float: left;
}

.rightBlock {
     float: right;
}

Check out this jsfiddle: https://jsfiddle.net/ko1qsbom/6/

Also more information on floats: https://developer.mozilla.org/en-US/docs/Web/CSS/float

answered Jan 26 '16 at 02:03

BTruong

11
4

I was going to suggest the same thing. The reason why I think this is preferable is because it makes sense to group each data set together. Also, you can append more image sets and the styles would apply to all of them, depending on how you assign class names and write the css. – Dave F Jan 26 '16 at 02:06
but what if width increases – Amitesh Kumar Jan 26 '16 at 02:23
Increasing the width with my code would pull the divs further and further away from each other. If you wanted them to stay next to each other, you could put the leftBlock and rightBlock divs in another div and have that div set at a specific width. – BTruong Jan 26 '16 at 02:52

score 0 · Answer 4 · answered Jan 26 '16 at 01:51

Try This give them witdth total width should be less then 100% and float:left

HTML

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

<!--<h1 class="left">title0 </h1> --> 
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->


<!-- <h1 class="right">title1 </h1> --> 
<img class = "right" src="img_tree.png"  alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> -->

CSS

/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}

h1.right p1.right{
text-align: right;
}
.div1 {
  width:40%;
   float: left;
}
.div2 {
  width:40%;
  float: left;
}

you can use display:inline-block; also

How to get 2 pictures to appear side by side is this html example?

4 Answers4