ansaurus

Question

How to position DIV at bottom of page between two vertical navigation bars

Answer 1

A:

.html:

<div id="wrapper">
 <div id="nav_open">
  nav_open
 </div>

 <div id="content">
  <div id="content_header">
   content_header
  </div>

  <div id="content_body">
   content_body
  </div>

 <div id="nav_closed">
  nav_closed
 </div>
</div>

  <div style="clear:both;">&nbsp;</div>
  <div id="content_footer">
   Footer
  </div>
 </div>

CSS:

html, body { margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
   border: none;
  }

#wrapper { position: relative; 
   width: 100%;
   min-width: 940px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;
  }

#nav_open { position: absolute;
   top: 0px;
     left: 0px;
   width: 125px;
   height: 100%;

   border: 1px solid #ff0000;
             }

#content { top: 0px;
   margin-left: 126px;
   margin-right: 201px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;   
  }

#nav_closed { position: absolute;
   top: 0px;
   right: 0px;
   width: 200px;
   height: 100%;

   border: 1px solid #ff0000;   
             }

#content_header { border: 1px solid #ff0000;
  }

#content_body { border: 1px solid #ff0000;
  }

#content_footer { height: 15px;

   background: #df781c;
   border: 1px solid #ff0000;
   text-align:center;
   line-height:15px;
  }

Sarfraz 2010-02-01 05:32:04

Thanks for the reply but that did not seem to work. It moved the footer outside of the #content container. The footer needs to stay in the #content div and between the two #navigation divs.Please see http://proficients.com/www/ccpets.com/ for an example of what the page is supposed to look like. Except the orange bar should be at the bottom of the screen.

proficients 2010-02-01 19:25:07

ansaurus

tags:

views:

answers:

How to position DIV at bottom of page between two vertical navigation bars

related questions