How do I force (rotated) elements in a vertical flexbox to NOT overlap?

user_11947966 0
Viewed 875

I'm trying to put some rotated text on the upper left corner of a page, and add a line on top of said text, like so.

I tried doing this by having a vertical flex box. I assumed that by drawing the line as a div , and by adding an h3 element afterwards, the spacing would be handled by flex box. For reference, here is the code, 

<div style="display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            margin-right: 90%; 
            height: 100vw;
            width: auto;
            ">

            <hr style="transform: rotate(-90deg);
                       width: 9%;
                       position: fixed;">

            <h3 style="font-family: Italianno; 
                       font-size: 170% ;
                       transform: rotate(-90deg);
                       margin-top: 80%;" 
                       id="fancy-logo">

                Sorority
            </h3>

</div>

Unfortunately, as a I resize the page, the line on top eventually overlaps, with the word? Any advice on how to tackle this ?

flexbox margin css html
2 Answers

Try it this way using the :before pseudo-class to create the line and writing-mode to get the text correctly.

div {
  display: inline-block;
}

div:before {
  content: '';
  width: 1px;
  height: 100px;
  background: #000;
  display: block;
  margin: 0 auto;
}

h3 {
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding-bottom: 1em;
}
<div>
  <h3>
    Sorority
  </h3>
</div>

user_32896600

writing-mode is indeed a good way to start, and flex also very useful here to draw that visual line, but from a pseudo instead hr

the writing-mode value would be sideways-rl, but not working everywhere, transform can be used here to mirror the h3 itself.

example

h3 {
  writing-mode: vertical-lr;
  display: flex;
  padding: 0.5em 0 0;
  transform: scale(-1, -1);
  background:lightgray
}
h3::after {
  content: "";
  flex: 1;
  border: outset 2px;
  margin: 0.5em auto 0;
}


body {margin:0;}
div {
  min-height: 80vh;/* if not enough content to stretch it */
  display: flex;
}
div[class] {margin:auto;min-height:auto;display:block;}
<div>
  <h3>
    Sorority
  </h3>
  <div class> <!-- extra markup for demo *-->
    <p>looking for more content to set here aside, but not rotated ?</p>
    <p>inside a flex box, this div can be aligned</p>
  </div>
</div>

here is a codepen from a similar question

user_24420990
Related