I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly:
.container {
position: relative;
width: 100%;
}
.left {
position: absolute;
left: 0px;
}
.right {
position: absolute;
right: 0px;
}<html>
<body>
<div class="container">
<img src="..." class="left" />
<img src="..." class="right" />
</div>
</body>
</html>After referring to information available at http://www.w3schools.com/css/css_positioning.asp, especially the statement that reads as follows:
An absolute positioned element is located in relation to the first parent element that has a position other than static. In case there are no such elements found, the containing block defaults to <html>
The main problem lies in the fact that the container div lacks any height. I would prefer not to specify the height of the container div. Although I am aware that floating one image to the left and another to the right, along with applying overflow: auto to the container div can resolve the issue, I was hoping to avoid that approach as I appreciate the technique of utilizing absolute positioning within a relative div.
Is there a possibility of achieving this without those alterations?