CODEWITHSUNDEEP
css
CJe
CJe

Reputation: 1992

Bottom aligning div without specifying parent container height

I have some html like this

<div class="gRow">
    <div class="cell c9 right last">Text</div>
    <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
    <div class="cell c7 right gCol7">Text</div>
</div>

See this fiddle: http://jsfiddle.net/LmZYE/

What I would like is to have the two "Text" div's align to the bottom of the gRow div.

I don't know the height of gRow at render time as the text changes with selected language. I have tried positioning gRow relative and my inner div's absolute, bottom:0 but in vain.

Can I do what I'm trying to do or do I need to know the height of the gRow div?

enter image description here

EDIT: Forgot one thing: I would like to have a right border going all the way from the top to the bottom of gRow.

Thanks in advance!

Upvotes: 3

Views: 2669

Answers (2)

Pete
Pete

Reputation: 58442

If you need to do this using divs rather than a table you can use the css for display:table to make your divs respond like a table would:

html

<div class="table">
    <div class="row">
        <div class="cell c9 right last">Text</div>
        <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
        <div class="cell c7 right gCol7">Text</div>
    </div>
</div>

css 

.table {display:table; border-right: 1px solid red;}
.row {display:table-row;}
.cell {border-left: 1px solid red; display:table-cell; width:33%;}

Then you can keep adding rows and cells as you please.

You are also able to take advantage of the vertical-align property for if you want to align text to the middle or bottom of the div

http://jsfiddle.net/LmZYE/6/

Upvotes: 2

Vimal Stan
Vimal Stan

Reputation: 2005

If I've understood the question right, this is what you're looking for.

HTML

<div class="gRow">
    <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
    <div class="bottomRow">
        <div class="cell c9 right last">Text</div>
        <div class="cell c7 right gCol7">Text</div>
    </div>
</div>

CSS

.gRow {
    width:400px;
    overflow: hidden;
    position: relative;
    border: 1px solid #d3d3d3;
    padding-bottom: 20px;
}
.bottomRow {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.c7, .c8, .c9 {
    width:80px
}
.right {
    float: right;
}
.cell {
    border-left: 1px solid red;
}

Upvotes: 1

Related Questions