JUG JUG - 3 months ago 8
CSS Question

How to display images on two sides of content using html/css?

I am new to CSS and working on a page that I would like to render as shown below -

Sample Web Page

How do I write css so that the content stays in the center while images floats vertically on left and right side of it?

Answer

Put the images in containers, then apply position: absolute.

.wrapper {
  position: relative;
  width: 1024px;
}

.container {
  margin: 0 auto;
  width: 600px;
  height: 300px;
  background-color: #ccc;
}

.left, .right {
  position: absolute;
  width: 200px;
  text-align: center;
}

.left {
  top: 0;
  left: 0;
}

.right {
  top: 0;
  right: 0;
}
<div class="wrapper">
  <div class="left">
    <img src="http://placehold.it/100">
    <img src="http://placehold.it/120">
  </div>
  <div class="container">Main content</div>
  <div class="right">
    <img src="http://placehold.it/50">
    <img src="http://placehold.it/150">
  </div>
</div>