learner learner - 5 months ago 18
HTML Question

Vertical alignment issues with CSS rotate

I'm experiencing vertical alignment issues in CSS. I want to display content from bottom to top.

My main objectives with this:


  • content width is based on parent height;

  • content is aligned with the bottom of the parent;

  • content is rotated counter-clockwise;



I've seen this link: Vertical Alignment and other on SO. Unfortunately I can't find an answer.

I made a sample fiddle which illustrates my problem: vertical alignment fiddle. My results are:


  • element width is based on parent width;

  • there is a gap when the content is rotated;





.container {
position: absolute;
width: 100%;
height: 92%;
}
.side-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 0, 1.0);
width: 20%;
height: 100%;
box-sizing: border-box;
}
.main-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 255, 1.0);
width: 80%;
height: 100%;
box-sizing: border-box;
}
.text-content {
border: 2px solid rgba(255, 0, 0, 1.0);
bottom: 0;
width: 100%;
position: absolute;
float: left;
font-size: 10px;
color: rgba(255, 102, 0, 1.0);
transform-origin: left top 0;
transform: rotate(-90deg);
}

<section class="container">
<div class="side-content">
<span class="text-content">Vertical Alignment</span>
</div>
<div class="main-content">
</div>
</section>




Answer

Try this, adjusted the transform-origin value, and added translateY(100%) along with the rotate(-90deg).

.text-content {
  ...
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}
<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>