Welcome to WebmasterWorld Guest from 54.224.160.42

Forum Moderators: not2easy

Message Too Old, No Replies

aligning a block with the bottom edge of its containing block

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

New User

10+ Year Member

joined:Apr 1, 2004
posts:2
votes: 0


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)

Junior Member

10+ Year Member

joined:Aug 21, 2003
posts:74
votes: 0


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

New User

10+ Year Member

joined:Apr 1, 2004
posts:2
votes: 0


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)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 0


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)

Junior Member

10+ Year Member

joined:Aug 21, 2003
posts:74
votes: 0


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)

New User

10+ Year Member

joined:Feb 17, 2004
posts:19
votes: 0



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