Fixed Position Example

by Kevin Rak

HTML

<div class="container" style="display: table;">
  <div style="display: table-row;">
    <div id="left-nav" style="display: table-cell;">
      <div id="search">
        Search
      </div>
    </div>
    <div id="body" style="display: table-cell;">
    </div>
  </div>
</div>

CSS

body, html, .container{
  width: 100%;
}

#left-nav {
  width: 25%;
  background-color: gray;
}

#body {
  background-color: lightblue;
}

#search {
  position: fixed;
  background-color: red;
  bottom: 0;
  width: 25%;
}

JavaScript

$(function(){
	for (i = 1; i <= 100; i++)
		$('#left-nav').append(i + '<br/>');
})