CODEWITHSUNDEEP
htmlcssvertical-alignmentvertical-text
Dragynjump
Dragynjump

Reputation: 23

Vertical text affects other text placement

I'm trying to make an online portfolio using HTML and CSS, but I'm having trouble with some vertical alignment.

I want to have a line of vertical text that goes down the left side of the screen that says, "My occupation". On the right side of the screen will be pictures and text that reads "My name", all formatted normally.

I made the vertical text, but whenever I try to add content after that, it automatically aligns itself to the bottom of the vertical text. I'm even using span to try and align it but it doesn't work. How do I get the following content to align to the top of the container?

Here's my source code.

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}
<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

Upvotes: 2

Views: 25

Answers (2)

Robby Cornelissen
Robby Cornelissen

Reputation: 97120

Just use vertical-align on your main content:

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
    vertical-align: top;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}
<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

Upvotes: 0

Hao Wu
Hao Wu

Reputation: 20669

Give vertical-align: top to .myName should work

vertical-align: top;


.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
    /* added */
    vertical-align: top;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}
<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

Upvotes: 0

Related Questions