Align dom element to the bottom of another fixed-top element

I have a div that is fixed to the top of the screen. In the div there is a search area where you make ajax calls and fetch data into the div, and that changes the div height.

Also there is another div called "ThingsToAlign". I want to align this to the bottom of the fixed-top div.

Any one knows how to do this? I tried vertical-align or float: top but none of them are working.. Thanks.

<div className="container-fluid">
    <div className="navbar-fixed-top">
      <SearchArea />
    </div>
    <div>
      <ThingsToAlign/>
    </div>
</div>

In bootstrap the class navbar-fixed-top has the following properties.

.navbar-fixed-top {
    position: fixed;
    top: 0;
}

p.s: I was coding in react.js so that's why you see "className" instead of "class"

Answers


First, your HTML attribute className is incorrect (in standard HTML). It should be class.

Second, you should try to stay away from using angle brackets to surround demo text. The browser will consider it a tag and ignore it (i.e., it will be invisible when rendered).

Your question is not entirely clear to me, but from what I understand this demo may be helpful: http://jsfiddle.net/kdbsm3hz/

Otherwise, you may find a solution in other similar questions:


Need Your Help

Combining multiple strings in Cocoa

ios objective-c iphone nsarray stringwithformat

I want to be able to combine each index so that I get @"Biology Teacher A BK 1", but so far I have been unsuccessful. This is what I have so far, but I do not know where to go from here.

Using rows and column from bootstrap for mobile

html css twitter-bootstrap

I am making a site and using bootstrap 3.3.5. The only problem I am having at the moment is the row/column structure I have is not displaying correctly on mobile.