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


Tags: html,css

Problem :

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.



Solution :

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


    CSS Howto..

    bootstrap dropdown on mouse over the menu item should show edit/delete icon on right side

    How to make css flex box row auto resizing horizontally with image

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    How to resize DIV to less than its initial width & height?

    How do I hide text that is not wrapped in

    or ?

    CSS - How can I make a font readable over any color?

    How to put a canvas on an image?

    CSS to keep middle image in 100% width slideshow always in center

    How to set alternate row color for a given attached diagram

    CSS style not showing on print preview

    How to add CSS stylesheet to aspx.vb table

    How to apply css to 'text' and 'password' together [closed]

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How to use cookies to change css ?

    How to convert css long to css one line style with Notepad++

    How can I append the images from this JSON file properly into the correct divs

    LESS: How to specify current tag with nesting?

    How To Expand A Textarea To 100% Using CSS Only

    How to change color in first td in my table using class

    Hide all other divs with the same name on div hover, show hovered div

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    How do I animate an entire table row in Angular without affecting the table row border?

    How to do CSS for a grid of images

    CSS How to make DIV Border Dynamic in Width

    How to determine the 'toggle' status of a CSS toggle input?

    How to change styling of a specific div onhover of another element when divs share an id

    How do I make this nested div to show up on top right corner and make text wrap around it?

    How to get website to show better in iPhone and iPad? (width too little)

    How to use jQuery to detect loaded background image after inserting out CSS

    How to expand and collapse three div's side by side?