How do you float and rotate an image with css?

General
1

I have a very horizontal image that I want to rotate 90 degrees in mobile to make it vertical, then float: right within my text. I can get it to rotate (not hard), but then it doesn’t float. Is this possible? If it isn’t possible, do I then have to rotate my image in Photoshop to get it work?

.hole-story-container {
  width: 50%;
  margin-left: 25%;
}

@media only screen and (max-width: 800px) {
  .hole-story-container {
    max-width: 100%;
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }
}

.hole-story-container .story-headline {
  font-family: 'Montserrat';
  color: #838377;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 150%;
}

@media only screen and (max-width: 800px) {
  .hole-story-container .story-headline {
    font-size: 2rem;
    line-height: 120%;
  }
}

.hole-story-container p {
  font-family: 'Montserrat';
  color: #838377;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 150%;

}

.vertical-hole {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  float: right;
  padding: 20px;
}

<div class="hole-story-container">
  <div class="story-headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
  <img class="vertical-hole mobile " src="//newsinteractive.post-gazette.com/.test2/img/hole-1.png"/>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
2

The issue you’re facing happens because transform: rotate(90deg) changes the flow of the element, but float only applies to block-level elements in normal flow—not transformed ones. When you rotate an image, it still occupies space as if it were unrotated, which prevents proper floating behavior.

Solution: Use display: inline-block + writing-mode for better control

Instead of float: right, use flexbox or writing-mode to control layout while keeping the image rotated.

Updated CSS (Best Approach)

.vertical-hole {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  display: inline-block; /* Ensures the image behaves correctly */
  margin-left: 20px; /* Space between text and image */
}

@media only screen and (max-width: 800px) {
  .hole-story-container {
    display: flex;
    flex-direction: column;
  }

  .hole-story-container p {
    writing-mode: horizontal-tb; /* Ensures proper text flow */
  }

  .vertical-hole {
    float: none; /* Remove float */
    margin-left: auto; /* Align right */
    margin-right: 0;
    align-self: flex-end; /* Keeps it to the right */
  }
}

Alternative Approach: Use position: absolute

If you want absolute control of placement:

@media only screen and (max-width: 800px) {
  .hole-story-container {
    position: relative;
  }

  .vertical-hole {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position: absolute;
    right: 0;
    top: 50px; /* Adjust as needed */
  }
}

When Should You Rotate in Photoshop Instead?

  • If search engines, accessibility tools, or print layouts matter, rotating in Photoshop is better because:
    • The image metadata remains correct.
    • Some older browsers (especially email clients) ignore CSS transforms.
    • The image won’t interfere with text reflow.

If your use case is purely web-based and responsive, the CSS method works fine.