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
  • 700,868
  • 160
  • 1,392
  • 1,356
Aaron
  • 1,956
  • 5
  • 34
  • 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
  • 7
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,941
  • 4
  • 54
  • 75
landons
  • 9,502
  • 3
  • 33
  • 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
  • 21,475
  • 8
  • 43
  • 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,502
  • 1
  • 27
  • 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
  • 629
  • 4
  • 6