Keeping page appearance uniform on different devices - image

Question

I am building a website for the first time. I have a basic question regarding how the pages appear on different devices.
I have a row of three , which each contain an image, e.g.:
<div class="img_box"><img src="1.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="2.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="3.png" class="prod_img" border=0 height = 343 width = 298/>
As you can see, the three images are each 298px wide. When I view on my laptop, all three fit on one row. When I look on other machines, sometimes the third image is on a new row.
This makes sense to me, as I guess that the screen resolution on the other machines is lower or something.
My question: what is the correct way to ensure that all three images remain in one row when viewed on a computer? I understand that each image would probably have to be on a row of its own when viewed on a cellphone. There must be a standard way to deal with this. Do I give the width of the objects in % instead of pixels?
Any help is appreciated.

Answer 1

This is happening because you're using images of fixed size rather than using a percentage which allows them to resize allowed by the CSS and the device used to view the web page.
Currently your images width total is 896px and this excludes any padding that you may have added in the CSS. Therefore devices or windows smaller than this number will result in multiple line breaks. To overcome the issue as previous mentioned you want to use percentages.
Below is an example demonstrating how you can adopt width in precentage instead of width in pixels.
/* CSS */
.image-container {
width: 100%;
padding: 0;
margin: 0 auto;
}
.image-container img {
padding: 4px;
width: 100%;
float: right;
}
.image-container.two img {
width: 50%;
}
.image-container.three img {
width: 33.33%;
}
.image-container.four img {
width: 25%;
}
<!-- HTML -->
<!-- 1 image -->
<div class="image-container">
<img src="1.png" alt="Image Description 1">
</div>
<!-- 2 images -->
<div class="image-container two">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
</div>
<!-- 3 images -->
<div class="image-container three">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
</div>
<!-- 4 images -->
<div class="image-container four">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
<img src="4.png" alt="Image Description 4">
</div>