JUG JUG - 2 months ago 4x
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?


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 class="container">Main content</div>
  <div class="right">
    <img src="http://placehold.it/50">
    <img src="http://placehold.it/150">