CODEWITHSUNDEEP
htmlcss
Muflix
Muflix

Reputation: 6798

text aligned to the left and another text aligned to the right on the same line with different height

I have this code

<div>
  <div style="float:left">
      <h2>header</h2>
  </div>
  <span style="float:right; vertical-align: bottom">
          text2
  </span>
  <div class="clear:both"></div>
</div>

I am not able to vertically align the text2 to the bottom of the parent div.

How to do it?

Upvotes: 0

Views: 29

Answers (2)

Johannes
Johannes

Reputation: 67778

That's rather strange HTML code, but here's a solution that doesn't change the HTML:

(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)

div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
  <div style="float:left">
      <h2>header</h2>
  </div>
  <span style="float:right; vertical-align: bottom">
          text2
  </span>
  <div class="clear:both"></div>
</div>

Upvotes: 1

Kwaadjei
Kwaadjei

Reputation: 309

Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned

try this 

`<div style="float:left">
    <h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
        <h2> text2</h2>
</div>
<div class="clear:both"></div>`

Upvotes: 0

Related Questions