May 012009
 

In table of height 500px, if we have 2 rows and we set the first one 100px, the second will fill in the rest of the space. In CSS, we can all so make our div behave the same as table. Here sample code:

<html>
  <head>
    <style>
    #main {
      height: 100%;
      width: 100%;
      position: relative;
    }
    #top{
      background-color: blue;
      height: 200px;
    }
    #bottom{
      background-color: gray;
      position: absolute;
      bottom: 0px;
      top: 200px;
      width: 100%
    }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="top"></div>
      <div id="bottom"></div>
    </div>
  </body>
</html>

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2012 Programming & technology Suffusion theme by Sayontan Sinha