I've seen several posts related to this issue, but still can't get the following to work:

.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>

According to http://www.w3schools.com/css/css_positioning.asp, specifically the line that says:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

The issue is that the container div has no height. I'd really like to not have to specify the height of the container div. I know that floating the one image left, and the other image right, and setting overflow: auto on the container div will work, but I guess I was hoping to not have to go that route since I like the technique of absolute positioning inside a relative div.

Is this possible?

html css css-position
Edit
Report