homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
aligning a block with the bottom edge of its containing block
trocat

10+ Year Member



 
Msg#: 3313 posted 6:34 pm on Apr 1, 2004 (gmt 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.

 

LinuxGold

10+ Year Member



 
Msg#: 3313 posted 6:42 pm on Apr 1, 2004 (gmt 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>

trocat

10+ Year Member



 
Msg#: 3313 posted 6:56 pm on Apr 1, 2004 (gmt 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).

SuzyUK

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



 
Msg#: 3313 posted 7:17 pm on Apr 1, 2004 (gmt 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

LinuxGold

10+ Year Member



 
Msg#: 3313 posted 7:31 pm on Apr 1, 2004 (gmt 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.

oberon

10+ Year Member



 
Msg#: 3313 posted 11:37 am on Apr 2, 2004 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved