I agree with you: absolute position is not an adequate tool; even though it really is not absolute, but a kind of relative (the name "absolute" is wildly misleading) and should only be used when overlapping of HTML elements is required, which is not your case.
At the same time, your problem is easily solved via the CSS property
display, which should have the value "inline-block". Such blocks themselves can flow as inline elements or be organized in a bigger structure in some other way.
Here is the simple prototype for you, as simple as I could invent:
<html>
<head>
<title>Display demo</title>
<style>
div.fourImages { display: inline-block; }
img { width: 60; height: 60; border: black solid thin; }
</style>
</head>
<body>
<div class="fourImages">
<img/><img/><br/>
<img/><img/>
</div>
<div class="fourImages">
<img/><img/><br/>
<img/><img/>
</div>
</body>
</html>Please ignore the "img" style; I added it as a tool to mimic images, which are not real images, because they lack URIs. Replace them with real
img elements.
I should give you the idea. If the images come at different sizes and need more complicated layout rules, the inner layout also can be implemented based on the
display properties. In complicated cases, table-like layout can be quite helpful, with values like "table", "table-cell", sometimes "table-row"…
See also:
display — CSS | MDN[
^].
[EDIT]
I almost forgot: I would recommend: never specify both width and height of
img. Specify none of them or only one, and only if you need to re-sample the image on rendering; such re-sampling might be needed to bring several images of different sizes to the same width or height. Remaining component of size will be defined by the image itself; and not specifying the size is even better, unless required. Specification of both may distort the image, which will happen if its aspect ratio does not match your attribute. Another problem is: scaling an image up can greatly compromise its quality.
—SA
Submit an article or tip