align div at the bottom of another div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mfaisalwarraich
    New Member
    • Oct 2007
    • 194
    #1

    align div at the bottom of another div

    hi everybody,

    i want to align a div at the bottom but inside the div. here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
	background-color: #006;
	width: 780px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 200px;
}
#navbars {
	background-color: #999;
	height: 50px;
	width: 450px;
	overflow: auto;
}
-->
</style>
</head>

<body>
<div id="header">
  <div id="navbars"></div>
</div>

</body>
</html>
    The div wit the id "navbars" needs to be aligned at the center bottom inside the div bottom header. please tell me how i can do this using css.

    thanx
    Tags: None
    • dayanandrahate
      New Member
      • Apr 2009
      • 1
      #2
      use position:relati ve for Heder id and position:absolu te for navbars.
      the code will be as ffollow:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitl ed Document</title>
      <style type="text/css">
      <!--
      #header {
      background-color:#000066;
      height:200px;
      margin:0 auto;
      position:relati ve;
      width:780px;
      }
      #navbars {
      background-color:#999999;
      bottom:0;
      height:50px;
      overflow:auto;
      position:absolu te;
      width:450px;
      }
      -->
      </style>
      </head>

      <body>
      <div id="header">
      <div id="navbars"></div>
      </div>

      </body>
      </html>

        Comment

        • equinoxes in
          New Member
          • Jun 2014
          • 1
          #3
          How to align One div to the bottom of another div tag

          Using the below code i achieved the alignment.
          Check this page

          #wrapper {
          width: 960px;
          height: auto;
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 50px;
          margin-left: auto;
          background-color: #e0ddd6;
          position: relative;

          }


          #footer {

          width: 960px;
          height: auto;
          color: #49423f;
          margin-bottom: 0px;

          }

            Comment

            Previous template Next
            Working...