Div aligned at base of another div 1

Glasgow · May 31, 2005

I thought I'd cracked this but it appears not. I want a div within a div to give the effect that the 'child' div appears as a strip that aligns with the base of its parent. The example below achieves the effect of it aligning with the top of its parent.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
</head>

<body>

<div style="width:360px; height:230px;
            background-color:yellow;">
  <div style="background-color:green;
              vertical-align:baseline;">
    I'd like this div to grow upwards from
    base of the yellow area as new text is
    added rather than downwards from the
    top as it currently behaves.
  </div>

</div>

</body>
</html>

Any suggestions as to how I can achieve this please?

Thanks in advance.

ChrisHunt · May 31, 2005

Here's one way:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<style type="text/css">
.outer {
  width:360px;
  height:230px;
  background-color:yellow;
  position:relative;
}
.inner {
  background-color:green;
  position:absolute;
  bottom: 0;
  width: 360px;
}
</style>
</head>
<body>
<div class="outer">
  <div class="inner">
    I'd like this div to grow upwards from
    base of the yellow area as new text is
    added rather than downwards from the
    top as it currently behaves.
  </div>
</div>
</body>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Glasgow · May 31, 2005

Excellent, thank you Chris. I was soooooo close with one of my previous attempts but omitted to specify the relative positioning in the parent.

As a side issue, on the inner div, is there any reason why I should not use width:100% rather than width:360px?

ChrisHunt · May 31, 2005

[tt]width:100%[/tt] seems to work OK too - go for it!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Glasgow · May 31, 2005

Thanks again!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Div aligned at base of another div 1

Glasgow

IS-IT--Management

ChrisHunt

Programmer

Glasgow

IS-IT--Management

ChrisHunt

Programmer

Glasgow

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor