0

http://jsfiddle.net/nFrp7/4/

I have a layout similar to this jsfiddle I have created. I want to know how to get the blue div to position itself at the bottom (where the red div extends) no matter what (but not using position: fixed; or bottom: 0;).

How can I do this?

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
Aaron
  • 1,926
  • 5
  • 31
  • 56

5 Answers5

1

Check this http://jsfiddle.net/nFrp7/10/

uses a wrap div to contain all the layout divs and uses absolute positioning for blue div

Yash Singla
  • 144
  • 6
0

Put a wrapper div around everything and apply height:400px; and position:relative; to it. Then use position:absolute;, bottom:0;, and right:0; on the blue div.

Purag
  • 16,611
  • 4
  • 51
  • 72
landons
  • 9,444
  • 3
  • 32
  • 46
  • When the content within the red div expands, it does not affect the blue div's positioning. – Aaron Dec 30 '11 at 20:53
  • Yeah, then you want a min-height:400px on the wrapper div and the red div. Probably also want an overflow:hidden on the wrapper div to keep your floats pushing down the wrapper... – landons Dec 30 '11 at 21:07
0

hmm.... 

.right-main {
width: 100px;
height: 30px;
clear: both;
background-color: green;
}

Clear the left div?

Since EVERYTHING is a float, I don't think it's possible without some positioning.

Well there's this... FIDDLE UPDATE

But it does use positioning.

Scott
  • 20,800
  • 8
  • 42
  • 55
  • This won't work. I'm fine with using positioning, I just can't come up with how to position something in line with the bottom of the red div. – Aaron Dec 30 '11 at 20:55
0

Ah... you're referring to the CSS 100% height problem. Check this out too: 100% Min Height CSS layout.

Community
  • 1
  • 1
Ayman Safadi
  • 11,446
  • 1
  • 26
  • 41
0

Try this,

.right-main {
      width: 100px;
      **height: 400px;**
      background-color: green;
    **position: relative;**
    } 

.bottom-right {
      background-color: blue;
      **position:absolute;**
      **bottom: 0;**
    }
rahool
  • 604
  • 4
  • 6