aligning a block with the bottom edge of its containing block

[trocat]

Hi,

I need to get a block to sit at the bottom edge of its containing block. What makes it hard is I can't use absolute positioning, because it needs to occupy document space.

Simple example:
[flyservers.com...]

The 2nd version is what i need, but without resorting to absolute positioning.

[LinuxGold]

.mbig {height:50px;width:300px;background-color: #ff0000;}
.mtextarea{background-color: #0000ff;width: 200px;margin-top:10px;}
/* IE hack */
* html .mtextarea {margin-top:12px;}

<div class="mbig">block with height 50px<div class="mtextarea">text sits at bottom</div></div>

[trocat]

I was hoping to avoid pushing it down with margins, so that if the text is displayed differently on different computers, it would not push the containing block beyond its height of 50px (or clip anything).

[SuzyUK]

Hi trocat - Welcome to WebmasterWorld

could you please post your code (simplified if necessary) instead of the link ....we like to have code samples here at WebmasterWorld, so that future visitors have something concrete to refer to, test pages tend to disappear into broken links and then no-one knows what we're talking about :)

Thanks..

>>I need to get a block to sit at the bottom edge of its containing block

Do you know the height of the bottom bit of text would bottom padding do to enable your containing block content to clear the absolute div and still give the perception that it's taking up the space?

Suzy

[LinuxGold]

SuzyUK,

I think what he was referring to something similiar to vertical-align:bottom; for tables.

Is there such a beast for CSS?

Please don't tell me that table is the answer.

[oberon]

.container {
background-color: #006699;
width: 300px;
}
.top {
overflow:auto;
height:50px;
}

.bottom {
width: 200px;
background-color: #CCCC33;
}

<div class="container">
<div class="top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
<div class="bottom">need this text at the bottom</div>
</div>