CSS Forum

**Joe3000** · 08:53 AM

I'd like the green DIV (class=bottom) to be flush against the bottom and left side of the red DIV (class=left).

Its OK in FF but not in IE.

Any ideas how to do this?

Code:

.bottom {
    position: absolute; 
    left: 6px;
    bottom: 6px;
    background-color: green;
    width: 212px;
    padding: 10px;
}

Code:

.left, .right,.right-scroll {
    float: left;
    height: 369px;
    color: #000000;
    padding: 10px;
}
.left {
    width: 213px;
    margin: 5px 0px 5px 5px;
    text-align: justify;
    background-color: red;
}

HTML Code:

  <div class="left">
Text
<div class="bottom">menu</div>
  </div>

**chrishirst** · 03-13-2008, 09:49 AM

add position:relative to .left so that .bottom is relative to that, not to the nearest relative ancestor.

**Joe3000** · 03-13-2008, 10:13 AM

Thanks.

It's still a little out in IE:

**chrishirst** · 03-13-2008, 10:15 AM

Need a url to see what is happening

**Joe3000** · 03-13-2008, 10:18 AM

Works fine in FF2 but not IE6

http://www.jfwebdesign.co.uk/dev2/

The red and the green backgrounds are only there as guides - not part of the site design!