positioning heading vertically to the right

Question

I am having problem positioning heading to the right in this fiddle. fiddle.
The problem is that the right positioned heading goes over the text to the left when I decrease the browser width.
I want the heading to stay where it is without setting fixed width for the divs.

.v-directed-heading-right {
  width: 100px;
  position: absolute;
  right: 0;
  transform: rotate(90deg);
  transform-origin: 80px 80px;
  font-size: 18px;
  font-weight: bold;
}

.border-right {
  position: relative;
  padding: 20px 40px;
  width: 100%;
  border: 1px solid #eee;
  margin-top: 20px;
  margin-bottom: 20px;
  border-image: linear-gradient(to right, transparent 70%, #999 70%) 20;
  text-align: right;
}

.section {
  position: relative;
  padding: 10% 7%;
}

<div class='section education '>
  <h2 class='v-directed-heading-right'> EDUCATION </h2>
  <div class='border-right'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text
    </p>
  </div>
</div>

https://stackoverflow.com/questions/1080792/how-can-i-draw-vertical-text-with-css-cross-browser — Paulie_D, Mar 07 '18 at 12:49
Re-opened but the techiques found in the link will solve this issue. If you use absolute positioning you need to set a width (because a `transform` is **purely visual**)...with `writing-mode` you do not. — Paulie_D, Mar 07 '18 at 12:50
Thanks guys for the help. I used padding in percentages. using fixed padding solved the issue. — azam khan, Mar 07 '18 at 12:54
what should I do with the question now as to I have the answer now. — azam khan, Mar 07 '18 at 12:57

score 0 · Answer 1 · answered Mar 09 '18 at 05:25

Is this you want ??

.border-right {
  position: relative;
  padding: 20px 40px;
  width: 100%;
  border: 1px solid #eee;
  margin-top: 20px;
  margin-bottom: 20px;
  border-image: linear-gradient(to right, transparent 70%, #999 70%) 20;
  text-align: right;
  box-sizing: border-box;
}
.section {
  position: relative;
  padding: 10% 7%;
}
.v-directed-heading-right {
  width: 100px;
  position: absolute;
  top: -16px;
  right: 30px;
  transform: rotate(90deg);
  transform-origin: 80px 80px;
  font-size: 18px;
  font-weight: bold;
}

<div class="section education ">
    <div class="border-right">
        <p> This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text </p>
        <h2 class="v-directed-heading-right"> EDUCATION </h2>
    </div>
</div>

positioning heading vertically to the right

1 Answers1