Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

aligning a block with the bottom edge of its containing block

   
6:34 pm on Apr 1, 2004 (gmt 0)

10+ Year Member



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.

6:42 pm on Apr 1, 2004 (gmt 0)

10+ Year Member



.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>

6:56 pm on Apr 1, 2004 (gmt 0)

10+ Year Member



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).
7:17 pm on Apr 1, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

7:31 pm on Apr 1, 2004 (gmt 0)

10+ Year Member



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.

11:37 am on Apr 2, 2004 (gmt 0)

10+ Year Member




.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>

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month