html – Need help horizontally aligning and distributing text-ThrowExceptions

Exception or error:

I am trying to build out my simple landing page:

enter image description here

and I am struggling to do the following:

Elegantly rotate the group of links on the right of my design in a way that equally distributes them based on the viewport’s height.

Here is what I have tried so far:

footer {
    position: fixed;
    height: 100vh;
    width: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);   
}

footer ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    list-style: none;
}

footer ul li {
    display: block;
    flex: 0 1 auto; 
    text-align: center;
}

This approach does rotate the links, but I noticed I then have to apply negative margin to my footer to see it on the page, and it does not equally distribute the links in a way that fits on the screen.

Also, based on my design, do you think using a fixed position for both the group of links and my name to the left makes sense? I’d like to maintain consistent padding to frame the page,

Thank you for any help, and let me know if I can clarify further.

How to solve:

Like this? I used flexbox and text-orientation

#sidebar{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: teal;
  height: 100%;
  right: 0;
  top: 0;
  padding: 0 12px;
}

#sidebar > div{
  color: white;
  font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
<div id="sidebar">
  <div>
    opt 1
  </div>
  <div>
    opt 2
  </div>
  <div>
    opt 3
  </div>
</div>

###

Using @Laif’s text-orientation.

This does not require fixed positions for any of the elements.
The only issue is your name does not match up with the first link on the right sidebar. I’m not sure how to achieve this (without js) as the content is dynamic.

body,
html {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  background: #00b49e;
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.left {
  display: flex;
  padding: 20px 0;
}

.left-container {
  display: flex;
  flex: 0 0 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.left-container>div {
  color: #000000;
  font-size: 12px;
  font-weight: 900;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.center {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

.center-container {
  width: 60%;
  padding: 0;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
}

.right {
  flex: 0 0 40px;
  margin: 20px 0;
}

.right-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.right-container>div {
  color: #000000;
  font-size: 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
<div class="container">
  <div class="left">
    <div class="left-container">
      <div>
        Sean Thompson
      </div>
    </div>
  </div>
  <div class="center">
    <div class="center-container">
      <p>
        A Designer at Twitter, in Boulder, Colorado. Inspired by minimalism, happiest in the wilderness.
      </p>
    </div>
  </div>
  <div class="right">
  <div class="right-container">
    <div>
      Twitter
    </div>
    <div>
      Resume
    </div>
    <div>
      Dribble
    </div>
    <div>
      Contact
    </div>
    </div>
  </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *