9 Replies Latest reply on Jul 23, 2013 11:48 AM by Nancy OShea

    my div tag or navigation tag is not centre in dreamweaver cc. pls help

    Level 1

      <--here is my html file - -->

       

            <---div id="bottom_box" class="fluid">

      <ul id="nav_main_ul" class="fluid fluidList">

          <li id="nav_main_ul_li" class="fluid">who we are

          </li>

          <li id="nav_main_ul_li" class="fluid">what we do</li>

          <li id="nav_main_ul_li" class="fluid">how we do</li>

          <li id="nav_main_ul_li" class="fluid">our work gallery</li>

          <li id="nav_main_ul_li" class="fluid">our clients</li>

          <li id="nav_main_ul_li" class="fluid">contact us</li>

          <li id="nav_main_ul_li" class="fluid">we r hiring</li>

        </ul>

       

       

            </div>

         

                </div-->

       

      <--here is my css code - -->

       

      #bottom_box {

                position: absolute;

                clear: both;

                float: left;

                top: 500px;

                width: 100%;

      }

       

      #nav_main_ul {

                width: 100%;

                margin-left: auto;

                margin-right: auto;

                background-color: #068788;

                text-align: center;

                display: inline-block;

      }

      #nav_main_ul_li {

                float: left;

                display: block;

                width: 13%;

                height: 30px;

                text-align: center;

                background-color: #068788;

                padding-left: auto;

                padding-right: auto;

                font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                color: #FFFFFF;

                font-size: smaller;

                line-height: 30px;

                text-decoration: none;

                letter-spacing: 1px;

      }

        • 1. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
          bgupta16 Adobe Employee

          1. Remove the code highlighted in red.

          <---div id="bottom_box" class="fluid">

          <ul id="nav_main_ul" class="fluid fluidList">

              <li id="nav_main_ul_li" class="fluid">who we are

              </li>

              <li id="nav_main_ul_li" class="fluid">what we do</li>

              <li id="nav_main_ul_li" class="fluid">how we do</li>

              <li id="nav_main_ul_li" class="fluid">our work gallery</li>

              <li id="nav_main_ul_li" class="fluid">our clients</li>

              <li id="nav_main_ul_li" class="fluid">contact us</li>

              <li id="nav_main_ul_li" class="fluid">we r hiring</li>

            </ul>

           

           

                </div>

           

                    </div-->

          2. Add margin as below to keep any tag centered.

          #bottom_box {

              position: absolute;

              clear: both;

              float: left;

              top: 500px;

              width: 100%;

              margin:0 auto;

          }

          If this doesn't help, please post a link to your page to have a look on it.

          • 2. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
            Level 1

            <--here is my html file - --> (now this is actual the html & code) pls check again

             

                  <div id="bottom_box" class="fluid">

            <ul id="nav_main_ul" class="fluid fluidList">

                <li id="nav_main_ul_li" class="fluid">who we are

                </li>

                <li id="nav_main_ul_li" class="fluid">what we do</li>

                <li id="nav_main_ul_li" class="fluid">how we do</li>

                <li id="nav_main_ul_li" class="fluid">our work gallery</li>

                <li id="nav_main_ul_li" class="fluid">our clients</li>

                <li id="nav_main_ul_li" class="fluid">contact us</li>

                <li id="nav_main_ul_li" class="fluid">we r hiring</li>

              </ul>

             

             

                  </div>

             

             

            <--here is my css code - -->

             

            #bottom_box {

                      position: absolute;

                      clear: both;

                      float: left;

                      top: 500px;

                      width: 100%;

            }

             

            #nav_main_ul {

                      width: 100%;

                      margin-left: auto;

                      margin-right: auto;

                      background-color: #068788;

                      text-align: center;

                      display: inline-block;

            }

            #nav_main_ul_li {

                      float: left;

                      display: block;

                      width: 13%;

                      height: 30px;

                      text-align: center;

                      background-color: #068788;

                      padding-left: auto;

                      padding-right: auto;

                      font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                      color: #FFFFFF;

                      font-size: smaller;

                      line-height: 30px;

                      text-decoration: none;

                      letter-spacing: 1px;

            }

            • 3. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
              bgupta16 Adobe Employee

              1. As you ave defined the width as 100% for the ul. It will take up the screen size and display it according to that. Without a width, it will expand to 100% of it's container div. So "margin:0 auto" isn't likely going to show any effect as you'll need something smaller than 100% width.

               

              2. The padding need to have value either in fixed length or %,it can't be set as auto.

               

              3. Also try removing the "display: inline-block;" in #nav_main_ul

              • 4. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                Level 1

                OK ma'am

                 

                but not solve the problem -  I can't see where is the mistake by me - i send you again the corrected file

                 

                <div id="bottom_box" class="fluid">

                <ul id="nav_main_ul" class="fluid fluidList">

                    <li id="nav_main_ul_li" class="fluid">who we are</li>

                   

                    <li id="nav_main_ul_li" class="fluid">what we do</li>

                    <li id="nav_main_ul_li" class="fluid">how we do</li>

                    <li id="nav_main_ul_li" class="fluid">our work gallery</li>

                    <li id="nav_main_ul_li" class="fluid">our clients</li>

                    <li id="nav_main_ul_li" class="fluid">contact us</li>

                    <li id="nav_main_ul_li" class="fluid">we r hiring</li>

                  </ul>

                      </div>

                 

                 

                #bottom_box {

                          position: absolute;

                          clear: both;

                          float: left;

                          top: 500px;

                          width: 100%;

                          margin:0 auto;

                }

                 

                 

                #nav_main_ul {

                          margin-left: auto;

                          margin-right: auto;

                          background-color: #068788;

                          text-align: center;

                }

                #nav_main_ul_li {

                          float: left;

                          display: block;

                          width: 13%;

                          height: 30px;

                          text-align: center;

                          background-color: #068788;

                          font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                          color: #FFFFFF;

                          font-size: smaller;

                          line-height: 30px;

                          text-decoration: none;

                          letter-spacing: 1px;

                }

                • 5. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                  bgupta16 Adobe Employee

                  I understand that you are having difficulties while developing the page. But please reply to your original post instead of creating a new thread each time.

                  • 6. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                    Level 1

                    Here is my complete file

                     

                    <------------------------------------------------->


                    <!doctype html>

                    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

                    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

                    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

                    <!--[if gt IE 8]><!--> <html class="">

                    <!--<![endif]-->

                    <head>

                    <meta charset="utf-8">

                    <meta name="viewport" content="width=device-width, initial-scale=1">

                    <title>Untitled Document</title>

                     

                     

                    <link href="_css/boilerplate.css" rel="stylesheet" type="text/css">

                    <link href="_css/main.css" rel="stylesheet" type="text/css">

                    <!--

                    To learn more about the conditional comments around the html tags at the top of the file:

                    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

                     

                     

                    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

                    * insert the link to your js here

                    * remove the link below to the html5shiv

                    * add the "no-js" class to the html tags at the top

                    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build

                    -->

                    <!--[if lt IE 9]>

                    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                    <![endif]-->

                    <script src="_js/respond.min.js"></script>

                    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/muli:n3,n4:default;anonymous-pro:n4:default.js" type="text/javascript"></script>

                     

                     

                     

                     

                     

                     

                    </head>

                    <body>

                              <div class="gridContainer clearfix">

                                <div id="top_background" class="fluid">

                          <div id="left_bar" class="fluid">"l"</div>

                          <div id="image_bar" class="fluid"> "image_bar"</div>

                          <div id="right_bar" class="fluid"> "r"</div>

                          <div id="text_bar" class="fluid" >

                          <div class="fluid head">our superior <strong>Infrastructure</strong> compliments our <strong>attitude</strong> for <strong>perfection</strong></div>

                          <div class="fluid content">Our multi-dimensional approach, supported by advanced technology, ensures that the solutions we architect for our clients are built in the most productive and cost-effective manner.

                    With its head office in South Delhi, India and branch offices in Mumbai, Jakarta & London, the agency boasts of being equipped with the most modern technological equipments and a well stocked library.</div>

                         

                          <div class="fluid content_2">A sleek conference room provides the right environment for brainstorming ideas. The audio-visual theater enhances the experience of making presentations for the advertising campaigns. Our Proficiency in printing technology alongwith a resource pool of printers and fabricators, supplemented by round-the-clock service enables us to service our clients in the best possible manner.</div>

                         

                          </div>

                     

                     

                         

                          </div>

                         

                         

                          <div id="bottom_box" class="fluid">

                    <ul id="nav_main_ul" class="fluid fluidList">

                        <li id="nav_main_ul_li" class="fluid">who we are</li>

                       

                        <li id="nav_main_ul_li" class="fluid">what we do</li>

                        <li id="nav_main_ul_li" class="fluid">how we do</li>

                        <li id="nav_main_ul_li" class="fluid">our work gallery</li>

                        <li id="nav_main_ul_li" class="fluid">our clients</li>

                        <li id="nav_main_ul_li" class="fluid">contact us</li>

                        <li id="nav_main_ul_li" class="fluid">we r hiring</li>

                      </ul>

                     

                     

                          </div>

                         

                         

                         

                         

                              </div>

                    </body>

                    </html>

                     

                    <------------------------------------------------->

                     

                     

                     

                     

                    complete CSS file

                     

                     

                    @charset "utf-8";

                    /* Simple fluid media

                       Note: Fluid media requires that you remove the media's height and width attributes from the HTML

                       http://www.alistapart.com/articles/fluid-images/

                    */

                    img, object, embed, video {

                              max-width: 100%;

                    }

                     

                     

                    /* IE 6 does not support max-width so default to width 100% */

                    .ie6 img {

                              width:100%;

                    }

                     

                     

                    /*

                              Dreamweaver Fluid Grid Properties

                              ----------------------------------

                              dw-num-cols-mobile:                    8;

                              dw-num-cols-tablet:                    16;

                              dw-num-cols-desktop:          24;

                              dw-gutter-percentage:          10;

                     

                              Inspiration from "Responsive Web Design" by Ethan Marcotte

                              http://www.alistapart.com/articles/responsive-web-design

                     

                              and Golden Grid System by Joni Korpi

                              http://goldengridsystem.com/

                    */

                     

                     

                    .fluid {

                              margin-left: 0;

                              width: 438px;

                              display: block;

                    }

                     

                     

                    .fluidList {

                        list-style:none;

                        list-style-image:none;

                        margin:0;

                        padding:0;       

                    }

                     

                     

                    /* Mobile Layout: 480px and below. */

                     

                    .gridContainer {

                              margin-left: auto;

                              margin-right: auto;

                              width: 89.9659%;

                              padding-left: 0.517%;

                              padding-right: 0.517%;

                              clear: none;

                              float: none;

                              position: relative;

                    }

                    #top_background {

                              width: 100%;

                              position: absolute;

                              background-color: #999999;

                              height: 802px;

                    }

                    #left_bar {

                              width: 24px;

                              position: absolute;

                              height: 308px;

                              top: 240px;

                              left: 23px;

                              background-image: url(../_images/band.gif);

                              background-repeat: repeat-y;

                    }

                    #image_bar {

                              width: 286px;

                              margin-left: 1.1494%;

                              clear: none;

                              height: 308px;

                              padding-top: 0px;

                              top: 240px;

                              background-color: #333333;

                              background-image: url(../_images/how-we-do.gif);

                              background-repeat: no-repeat;

                              background-size: cover;

                              background-attachment: scroll;

                              background-position: center;

                              position: absolute;

                              left: 70px;

                    }

                    #text_bar {

                              clear: both;

                              margin-left: 0;

                              position: absolute;

                              top: 580px;

                              background-color: #009999;

                              width: 390px;

                              left: 23px;

                              height: auto;

                    }

                    #right_bar {

                              width: 24px;

                              margin-left: 1.1494%;

                              clear: none;

                              height: 308px;

                              top: 240px;

                              left: 384px;

                              position: absolute;

                              float: left;

                              background-image: url(../_images/band.gif);

                              background-repeat: repeat-y;

                              background-size: auto auto;

                    }

                    #bottom_box {

                              position: absolute;

                              float: left;

                              background-color: #666666;

                              top: 40px;

                              clear: both;

                              width: 100%;

                    }

                    .head {

                              width: 100%;

                              text-align: center;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-style: normal;

                              font-weight: 400;

                              letter-spacing: 1px;

                              word-spacing: 5px;

                              left: auto

                    %;

                              right: auto;

                              bottom: 1%;

                              position: static;

                              height: 73px;

                              left: auto;

                              font-size: 14pt;

                              float: left;

                              clear: both;

                              display: block;

                              padding-top: 10px;

                    }

                    .content {

                              position: static;

                              padding-top: 11px;

                              left: 0%;

                              width: 94%;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-size: small;

                              text-align: justify;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              display: block;

                              float: left;

                              clear: both;

                              margin-left: 12px;

                    }

                    .content_2 {

                              position: static;

                              padding-top: 10px;

                              left: 0%;

                              width: 94%;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-size: small;

                              text-align: justify;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              display: block;

                              float: left;

                              clear: both;

                              margin-left: 12px;

                    }

                    #nav_main_ul {

                              width: 100%;

                              margin-left: auto;

                              margin-right: auto;

                              background-color: #068788;

                              text-align: center;

                    }

                    #nav_main_ul_li {

                              float: left;

                              width: 13%;

                              height: 30px;

                              text-align: left;

                              background-color: #068788;

                              padding-left: auto;

                              padding-right: auto;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              color: #FFFFFF;

                              font-size: smaller;

                              line-height: 30px;

                              text-decoration: none;

                              letter-spacing: 1px;

                    }

                    .zeroMargin_mobile {

                    margin-left: 0;

                    }

                    .hide_mobile {

                    display: none;

                    }

                     

                     

                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

                     

                     

                    @media only screen and (min-width: 481px) {

                     

                     

                    .gridContainer {

                              width: 92.4715%;

                              padding-left: 0.2642%;

                              padding-right: 0.2642%;

                              clear: none;

                              float: none;

                              margin-left: auto;

                              position: relative;

                    }

                    #top_background {

                              height: 600px;

                              padding-top: 0px;

                              padding-left: 0px;

                              top: 0px;

                              position: absolute;

                              background-image: url(../_images/tablet_bk.gif);

                              background-repeat: repeat-x;

                    }

                    #left_bar {

                              width: 3%;

                              position: absolute;

                              background-color: #009999;

                              height: 269px;

                              top: 80px;

                              left: 2.3%;

                     

                    }

                    #image_bar {

                              width: 26%;

                              clear: both;

                              margin-left: 0;

                              position: absolute;

                              height: 269px;

                              left: 7.4%;

                              top: 80px;

                              background-image: url(../_images/tb_how-we-do.gif);

                              background-repeat: no-repeat;

                              background-size: cover;

                              background-attachment: scroll;

                              background-position: center;

                     

                     

                    }

                     

                     

                    #text_bar {

                              clear: both;

                              margin-left: 0;

                              width: 57%;

                              height: 269px;

                              position: absolute;

                              top: 80px;

                              left: 35.7%;

                              opacity: 1;

                              overflow-y: auto;

                    }

                     

                     

                    #right_bar {

                              width: 3%;

                              margin-left: 0;

                              position: absolute;

                              float: left;

                              height: 269px;

                              top: 80px;

                              background-color: #0C9696;

                              right: 0px;

                              left: 95%;

                    }

                     

                     

                    #bottom_box {

                              position: absolute;

                              clear: both;

                              float: left;

                              top: 447px;

                    }

                    .head {

                              width: 100%;

                              text-align: center;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-style: normal;

                              font-weight: 400;

                              letter-spacing: 1px;

                              word-spacing: 5px;

                              left: auto

                    %;

                              right: auto;

                              bottom: 1%;

                              position: static;

                              height: 73px;

                              left: auto;

                              font-size: 14pt;

                              float: left;

                              clear: both;

                              display: block;

                              padding-top: 10px;

                    }

                    .content {

                              position: static;

                              padding-top: 11px;

                              left: 0%;

                              width: 94%;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-size: small;

                              text-align: justify;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              display: block;

                              float: left;

                              clear: both;

                              margin-left: 12px;

                    }

                    .content_2 {

                              position: static;

                              padding-top: 10px;

                              left: 0%;

                              width: 94%;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-size: small;

                              text-align: justify;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              display: block;

                              float: left;

                              clear: both;

                              margin-left: 12px;

                    }

                    #nav_main_ul {

                              width: 100%;

                              margin-left: auto;

                              margin-right: auto;

                              background-color: #068788;

                              text-align: center;

                    }

                    #nav_main_ul_li {

                              float: left;

                              display: block;

                              width: 13%;

                              height: 30px;

                              text-align: center;

                              background-color: #068788;

                              padding-left: auto;

                              padding-right: auto;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              color: #FFFFFF;

                              font-size: smaller;

                              line-height: 30px;

                              text-decoration: none;

                              letter-spacing: 1px;

                    }

                    .hide_tablet {

                    display: none;

                    }

                    .zeroMargin_tablet {

                    margin-left: 0;

                    }

                    }

                     

                     

                    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

                     

                     

                    @media only screen and (min-width: 769px) {

                     

                     

                    .gridContainer {

                              width: 93%;

                              max-width: 1232px;

                              padding-left: 0.1704%;

                              padding-right: 0.1704%;

                              margin: auto;

                              clear: none;

                              float: none;

                              margin-left: auto;

                              position: relative;

                    }

                    #top_background {

                              position: absolute;

                              width: 100%;

                              height: 700px;

                              background-image: url(../_images/body_bk.gif);

                              background-repeat: repeat-x;

                    }

                    #left_bar {

                              width: 2%;

                              position: absolute;

                              height: 308px;

                              top: 118px;

                              left: 3%;

                              background-image: url(../_images/band.gif);

                              background-repeat: repeat-y;

                    }

                    #image_bar {

                              width: 24%;

                              clear: both;

                              margin-left: 0;

                              position: absolute;

                              left: 10%;

                              height: 308px;

                              top: 118px;

                              background-image: url(../_images/how-we-do.gif);

                              background-repeat: no-repeat;

                              background-size: cover;

                              background-attachment: scroll;

                              background-position: center;

                              text-align: center;

                    }

                    #text_bar {

                              clear: both;

                              margin-left: 0;

                              width: 52%;

                              height: 308px;

                              position: absolute;

                              top: 118px;

                              left: 38.5%;

                    }

                    #right_bar {

                              width: 2%;

                              margin-left: 0;

                              position: absolute;

                              float: left;

                              height: 308px;

                              top: 118px;

                              right: 0px;

                              left: 94%;

                              background-image: url(../_images/band.gif);

                              background-repeat: repeat-y;

                    }

                    #bottom_box {

                              position: absolute;

                              clear: both;

                              float: left;

                              top: 500px;

                              width: 100%;

                              margin:0 auto;

                    }

                    .head {

                              width: 100%;

                              text-align: center;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-style: normal;

                              font-weight: 400;

                              letter-spacing: 1px;

                              word-spacing: 5px;

                              top: 4%;

                              left: auto

                    %;

                              right: auto;

                              bottom: 1%;

                              position: absolute;

                              height: 73px;

                              left: auto;

                              font-size: 20pt;

                    }

                    .content {

                              position: absolute;

                              padding-top: 20px;

                              left: 0%;

                              width: 47%;

                              color: #FFFFFF;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              font-size: small;

                              text-align: justify;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              top: 27%;

                              float: left;

                              clear: both;

                              display: inline-block;

                    }

                    .content_2 {

                              top: 27%;

                              position: absolute;

                              padding-top: 20px;

                              left: 51%;

                              width: 44%;

                              right: 3%;

                              display: table-column;

                              color: #FFFFFF;

                              font-size: small;

                              text-align: justify;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              letter-spacing: 1px;

                              word-spacing: 0px;

                              padding-right: 10px;

                    }

                    #nav_main_ul {

                              margin-left: auto;

                              margin-right: auto;

                              background-color: #068788;

                              text-align: center;

                    }

                    #nav_main_ul_li {

                              float: left;

                              display: block;

                              width: 13%;

                              height: 30px;

                              text-align: center;

                              background-color: #068788;

                              font-family: "AvantGarde Bk BT", "AvantGarde Md BT", Arial, sans-serif;

                              color: #FFFFFF;

                              font-size: smaller;

                              line-height: 30px;

                              text-decoration: none;

                              letter-spacing: 1px;

                    }

                    .zeroMargin_desktop {

                    margin-left: 0;

                    }

                    .hide_desktop {

                    display: none;

                    }

                    }

                     

                    -----------------------------------

                     

                     


                    • 7. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                      Level 1

                      if i use these code to other file - its work correctly but if use my orginal file - it is not in centre in the (#bottom div id)

                       

                      What i do ???

                      • 8. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                        bgupta16 Adobe Employee

                        There are many errors in the HTML and the CSS code. I would recommend fixing them first.

                         

                        http://jigsaw.w3.org/css-validator/

                        http://validator.w3.org

                         

                        This will  help in isolating the actual problem.

                        1 person found this helpful
                        • 9. Re: my div tag or navigation tag is not centre in dreamweaver cc. pls help
                          Nancy OShea Adobe Community Professional & MVP

                          You can't center APDivs because

                          1. they are removed from normal document flow and
                          2. positioned relative to the top, left borders in your browser's window or the nearest relatively positioned parent div (if you have one, but you don't).

                           

                          For best results, don't use any positioning in primary layouts.  You don't need it.  Positioning complicates matters and actually leads to much bigger problems later.  Learn to use default CSS positioning (none) along with Floats, Margins and Padding.

                           

                          See Centering Pages, Images and other elements with CSS

                          http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html

                           

                          CSS Floats and Margins

                          http://alt-web.com/DEMOS/3-CSS-boxes.shtml

                           

                           

                          Nancy O.