CODEWITHSUNDEEP
htmlcsstext-alignment
patrick
patrick

Reputation: 11711

Align H1 to bottom right of DIV

I have the following code to align my H1 to the bottom of the DIV:

CSS:

h1wrap{
  position: relative;
  height: 80px;
  width: 358px;
}
h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
}

HTML:

<div class="h1wrap">
  <h1>title</h2>
</div>

This partially does what I want... if aligns the text of the header at the bottom of the div and aligns it to the right. But instead of the H1 filling out the first line as much as possible before wrapping to the next line, I want to fill out the last line first and work the way up...

So a title like "THIS IS A VERY LONG TITLE" that now would be wrapped to:

THIS IS A VERY LONG
              TITLE

Should be this:

                THIS
IS A VERY LONG TITLE

I create this JsFiddle that has the code above and shows how for I got so far. A CSS solution would be perfect!

Upvotes: 0

Views: 3232

Answers (2)

cjspurgeon
cjspurgeon

Reputation: 1515

As far as I know, there's no broadly-supported way to do this without changing your markup. If you can't use writing-mode: rl-bt, flex-box would be my next thought, but you'd have to make each word it's own element.

Probably not feasible, but just in case: Fiddle

Markup:

<div class='h1wrap'>
  <h1><span>This</span> <span>Is</span> <span>A</span><span>Very</span> <span>Long</span> <span>Title</span></h1>
</div>

Styling:

h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}

h1 span {
  margin: 0 2px; /* otherwise you loose the space between words */
}

Upvotes: 1

wf4
wf4

Reputation: 3827

This is a CSS solution, support may be limited as I can't find it on http://caniuse.com/ but its working for me now in IE...

Add this to your H1: writing-mode: rl-bt

Fiddle: http://jsfiddle.net/rd3vzq48/1/

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Upvotes: 2

Related Questions