JUG JUG - 11 months ago 55
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 Source

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>