fill my whole window using div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • soms2m
    New Member
    • Apr 2008
    • 6
    #1

    fill my whole window using div

    hello,
    i want to make mt div to fill the whole window.. but by giving div height=100%, it dosn't work.. i've place my html code with this..

    <!-- html code -->[html]
    <!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>div height</title>

    <style type="text/css">
    html body{
    height:100%;
    }
    * html #backg {
    height:100%
    }

    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#fff;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    margin-bottom:0px;
    height:100%;
    }


    </style>
    </head>

    <body style="padding: 0; margin:0; ">
    <div id="front-back" style="position :absolute; top: 0px; left: 0px; z-index:11139; margin:0em; padding:0em; background-color:#000000; min-width:100%; height:100%; visibility:visi ble; overflow:auto;" ></div>

    <div style="position :relative; width:1004px; margin:0px auto; ">
    <div style="position :absolute; top:1200px; left:300px; color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size:16px">I want my div (id="front-back") overlap this div and fill this whole winodow</div>
    </div>
    </body>
    </html>[/html]
    Last edited by drhowarddrfine; Apr 6 '08, 03:54 PM. Reason: Please use code tags
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      You have the absolutely positioned element positioned 1200px from the top. That's why it's not overlapping.

        Comment

        • soms2m
          New Member
          • Apr 2008
          • 6
          #3
          Originally posted by drhowarddrfine
          You have the absolutely positioned element positioned 1200px from the top. That's why it's not overlapping.
          thank u for your reply..
          actually i'm using ajax + mootools for this.. i've may pages one is fit to window and some one is like 1200px something tht, wht should i do for this.. i'm very new to this.. so help he.. give me some examples too.. thank u once again..

            Comment

            • Ranjan kumar Barik
              New Member
              • Aug 2007
              • 95
              #4
              Originally posted by soms2m
              [html]
              <div style="position :relative; width:1004px; margin:0px auto; ">
              <div style="position :absolute; top:1200px; left:300px; color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size:16px">I want my div (id="front-back") overlap this div and fill this whole winodow</div>
              </div>
              [/html]
              Since you are using a absolute div having top 1200px, it must appear. after font-back div. Changing it's position property will work I think.

              Else you can specify the top of font-back div more than that of div to be overlapped.

              Thanks

                Comment

                Previous template Next
                Working...