CODEWITHSUNDEEP
htmlcss
tobefound
tobefound

Reputation: 1111

How to align the bottom of two left- and right aligned texts with bottom of parent container?

Imagine you have this:

<div class="parent_with_height200px">
  <div class="left">This is the left floated text, size 12px</div>
  <div class="right">This is the right floated text, size 40px</div>
</div>

How can I make the two texts "stand" on the bottom of the parent div having their baseline aligned with each other?

It's perfectly ok to change the css/html, it's the result I want.

Upvotes: 1

Views: 119

Answers (2)

Syri
Syri

Reputation: 671

As feeela says, using position is how you will accomplish this.

.parent_with_height200px {
    height: 200px;
    position: relative;
    background-color: #DDDDDD;
    }

.left {
    width: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #999999;
    }

.right {
    width: 50%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: #444444;
    }

See the output here: Example

Upvotes: 1

Sam
Sam

Reputation: 1243

Is this what you're looking for?

.left {
    float:left;
    width:50%;
}
.right {
    float:left;
    width:50%;
}

Upvotes: 0

Related Questions