4

I would like to position a div at the bottom of the page in the left cell if the content in the right cell grows. How can I do this?

The div is located between #cell-right and menu item 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>sd</title>
    <style type="text/css">
      html, body {
      width:100%;
      background:#6f711a;
      border:0px solid red;
      margin:0;
      padding:0;
      font-family:Arial;
      }
      #wrapper {
      width:1220px;
      padding:0;
      margin:10px auto;
      background:#ccc;
      border:3px solid white;
      }
      #content {
      background:#444;
      float:left;
      width:100%;
      min-height:620px;
      padding:0;
      margin:0;
      border:0px solid;
      }
      #cell-left {
      background-color:#444;
      float:left;
      width:195px;
      height:100%;
      padding:0;
      margin:0;
      border:0px solid;
      }
      #cell-right {
      float:right;
      width:1025px;
      height:100%;
      padding:0;
      margin:0;
      border:0px solid;
      }
      #footer {
      background-color:#000;
      color:#fff;
      clear:both;
      height:25px;
      padding:4px;
      margin:0;
      text-align:center;
      border:0px solid;
      }
      #cell-right #content-right{
      padding:10px 10px 0 10px;
      }
      #cell-left #content-left{
      padding:0;
      margin:0;
      }
      #content-left {
      position:relative;
      height:100%
      }
      #content-right {
      background:#f1f1f1;
      }
      #content-left ul li a {
      border-bottom: 1px solid #fff;
      color: white;
      display: block;
      overflow: auto;
      padding: 10px;
      text-decoration: none;
      }
      ul {
      border: 0 none;
      font: bold 13px Verdana;
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <div id="cell-left">
          <div id="content-left">
            <ul>
              <li><a href="#">menu item 1</a></li>
            </ul>
            <div style="vertical-align:bottom;height:100%;">vertically align on bottom</div> This is the div that needs to rest on the bottom
          </div>
        </div>
        <div id="cell-right">
          <div id="content-right">
            Lorem ipsum dolor sit amet consectetuer eget at enim ac eget. 
            Tellus nibh non ut congue montes parturient natoque odio at ipsum. 
            Id aliquet ante arcu feugiat Lorem dis ut libero laoreet dui. 
            Id tincidunt elit Nulla ut elit Nulla dui ullamcorper magnis ipsum. 
            Turpis Donec risus Proin tristique egestas hendrerit Vestibulum sed ut orci. 
            Pede adipiscing a et magna ultrices ipsum Aenean a ut laoreet. 
            Sed vitae vitae eu nibh pellentesque quis orci vitae at Aenean.
            .. lots more of text here ..
          </div>
        </div>
      </div>
      <div id="footer">sdsd</div>
    </div>
  </body>
</html>

2 Answers 2

2

Use the same css you have now. Just change body like this:

<body>
<div id="wrapper">
  <div id="content">
    <div id="cell-left">
      <div id="content-left">
        <ul>
          <li><a href="#">menu item 1</a></li>
        </ul>
      </div>
    </div>
    <div id="cell-right">
      <div id="content-right" style="position:relative">
        Lorem ipsum dolor ... bla bla bla
        <div style="position:absolute; left:-185px; bottom:10px; width:180px">This is the div that needs to rest on the bottom vertically align on bottom</div> 
      </div>
    </div>
  </div>
  <div id="footer">sdsd</div>
</div>
</body>

Actually I've changed just these lines:

  <div id="content-right" style="position:relative">
    Lorem ipsum dolor ... bla bla bla
    <div style="position:absolute; left:-185px; bottom:10px; width:180px">This is the div that needs to rest on the bottom vertically align on bottom</div> 
  </div>
1
  • podeig, thanks, your post is the only one that has worked so far in the example I posted. I didn't post all of the markup so the position of the div is still not correct. I'm trying to make some adjustments to see if I can get this working. I'll post back in a couple of minutes and let you know. Thank you for this answer.
    – jim H
    May 25, 2011 at 13:41
0

Give the div you want on the bottom a style="position:absolute; bottom:0" and the parent div (in this case the "content-left") a style="position:relative;"

1
  • thanks for the answer. I've tried this but the div won't move to the bottom.
    – jim H
    May 25, 2011 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.