2 Replies Latest reply: Jan 5, 2012 1:04 PM by upstart1762 RSS

    Getting element flush with left, right, and top side of browser window.

    upstart1762 Community Member

      Ok, this should be an easy one for you guys. Can anyone tell me how to make an element (in this case a header bar) flush with the left, right, and top of the browser window? I've tried many different ideas. Don't know where the margin or padding is coming from.

       

      Something with a fixed width will push out to the right (still leaving the gap on the left) and bring up scroll bars. I don't want scroll bars. I want an elastic element that will fit flush, with no gaps.

       

      Here is the code. I've stripped out everything except the header bar. View live at: http://www.upstartstudio.com/HS2.html .  Thank You!

       

       

      ---------

       

       

       

      <!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">

      #body {

           margin: 0px;

           padding: 0px;

      }

      #header {

                background-color: #333;

                margin: 0px;

                padding: 0px;

                height: 100px;

      }

      </style>

      </head>

       

       

      <body>

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

      </body>

      </html>