20 Replies Latest reply: Feb 23, 2013 12:06 PM by Nancy O. RSS

    Center web page on browser screen in Dreamweaver?

    nhirschler Community Member

      All web sites I have created and published in Dreamweaver have the pages come up on the browser screen on the left side. Is there a way to set up a site so the pages come up centered on all browser pages?

        • 1. Re: Center web page on browser screen in Dreamweaver?
          Harumbak! Community Member

          Hi, I guess it depends on your layout. Of you're using CSS then you need to set the left and right margin of your main container to auto. Please check example below.

           

           

          HTML:

          <div id="main"> test</div>

          CSS:

          #main {

          margin-right: auto;

          margin-left: auto;

          }

           

          If you need to have a visual example for this, try opening a new HTML document using a CSS layout, you can do that by going to file>new>blank page> then select a CSS Layout for HTML.

           

          I hope this post makes sense to you. ;-)

          • 2. Re: Center web page on browser screen in Dreamweaver?
            Nancy O. CommunityMVP

            Actually the full answer is: 1) Use a valid X/HTML document.  2) Put a width on your container division AND 3) use margin: 0 auto.  If you're using APDivs, may need to add a position: relative property, too.

             

            CSS:

             

            #wrapper {

                 width: 900px /**adjust as needed**/

                 margin:0 auto;

                 text-align:center; /**for older browsers**/

            }

             

            HTML:

             

            <body>

                 <div id="wrapper>

                 your page content goes here ---------->

                 </div> <!--end wrapper-->

            </body>

            </html>

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            www.alt-web.com/
            www.twitter.com/altweb
            www.alt-web.com/blogspot.com

            • 3. Re: Center web page on browser screen in Dreamweaver?
              David_Powers CommunityMVP

              I see it's your first post. Welcome to the forum.

               

              Nancy has given you the correct answer to your question, but you could have found it yourself by following the advice at the top of the forum to check the Dreamweaver FAQ. The answer is in Centering a page.

               

              You might also find it useful to spend a couple of minutes reading How to get help quickly.

              • 4. Re: Center web page on browser screen in Dreamweaver?
                nhirschler Community Member

                Thank you for your expertise. I got it to work on my index page. Now I just need to figure out if there's a way to globaly do the same thing for the rest of the site (it has 170+ pages). It is an HTML 4.0 site created in Dreamweaver 8. Any suggestions?

                • 5. Re: Center web page on browser screen in Dreamweaver?
                  nhirschler Community Member

                  Nancy - Thanks for your help. I was able to get my home (index) page to center. Do you know of a way to globaly make all the pages of the site (170+) center on the screen or do I need to go into each individually? - Ned

                  • 6. Re: Center web page on browser screen in Dreamweaver?
                    Nancy O. CommunityMVP

                    Link all your web pages to a global external Stylesheet (CSS). 

                    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7e1ca .html

                     

                    Use Find & Replace Tool.

                    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7cc 7a.html

                     

                    Example, search source code for <body> tag and replace it with

                    <body>

                    <div id="Wrapper">

                     

                    Repeat for closing </body> and end </div> tags.

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    www.alt-web.com/
                    www.twitter.com/altweb
                    www.alt-web.com/blogspot.com

                    • 7. Re: Center web page on browser screen in Dreamweaver?
                      asicollapse Community Member

                      Hi,

                      I tried adding a div wrapper tag to my DW CS4 template that I use for all my pages. I selected the body and inserted the div wrapper tag. When I previewed, all of it centered except the very background image. Inserted is my css markup.. please let me know what I am doing wrong.. thanks!!!

                      • 8. Re: Center web page on browser screen in Dreamweaver?
                        Nancy O. CommunityMVP

                        asicollapse,

                        Please post a URL to your page on the web server. We would need to see your HTML and CSS code to give meaningful answers.

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        www.alt-web.com/
                        www.twitter.com/altweb
                        www.alt-web.com/blogspot.com

                        • 9. Re: Center web page on browser screen in Dreamweaver?
                          asicollapse Community Member

                          <!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" />
                          <!-- TemplateBeginEditable name="doctitle" -->
                          <title>Di</title>
                          <!-- TemplateEndEditable -->
                          <link href="../photostyles.css" rel="stylesheet" type="text/css" />
                          <!-- TemplateBeginEditable name="head" -->
                          <!-- TemplateEndEditable -->
                          <script type="text/javascript">
                          <!--
                          function MM_preloadImages() { //v3.0
                            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                              var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                              if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                          }

                           

                          function MM_swapImgRestore() { //v3.0
                            var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                          }

                           

                          function MM_findObj(n, d) { //v4.01
                            var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                              d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                            if(!x && d.getElementById) x=d.getElementById(n); return x;
                          }

                           

                          function MM_swapImage() { //v3.0
                            var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                             if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                          }
                          //-->
                          </script>
                          </head>

                           

                          <body onload="MM_preloadImages('../photoshop_sliced_exports/overstates/images/Blog_over.jpg','. ./photoshop_sliced_exports/overstates/images/Portfolio_over.jpg','../photoshop_sliced_expo rts/overstates/images/Photo_over.jpg','../photoshop_sliced_exports/overstates/images/art_o ver.jpg','../photoshop_sliced_exports/overstates/images/clutter_over.jpg','../photoshop_sl iced_exports/overstates/images/contact_over.jpg')">
                          <div id="wrapper">
                            <div id="container">
                              <div id="header">
                                <img src="../photoshop_sliced_exports/header.jpg" alt="Di Lynn Ring header" width="955" height="98" border="0" usemap="#Map" />
                                <map name="Map" id="Map">
                                  <area shape="rect" coords="123,17,841,93" href="../index.htm" />
                                </map>
                                <div id="menubar"><a href="../index.htm"><img src="../photoshop_sliced_exports/btnblog.jpg" alt="Blog Button" width="107" height="62" id="Image1" onmouseover="MM_swapImage('Image1','','../photoshop_sliced_exports/overstates/images/Blog _over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../portfoliogallery/portfoliogallery/index.html"><img src="../photoshop_sliced_exports/btnportfolio.jpg" alt="Portfolio Button" width="174" height="62" id="Image2" onmouseover="MM_swapImage('Image2','','../photoshop_sliced_exports/overstates/images/Port folio_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../photo gallery/index.html"><img src="../photoshop_sliced_exports/btnbutton.jpg" alt="Photo Button" width="131" height="62" id="Image3" onmouseover="MM_swapImage('Image3','','../photoshop_sliced_exports/overstates/images/Phot o_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../artgallery/index.html"><img src="../photoshop_sliced_exports/btnart.jpg" alt="Art Button" width="84" height="62" id="Image4" onmouseover="MM_swapImage('Image4','','../photoshop_sliced_exports/overstates/images/art_ over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../clutter.htm"><img src="../btnclutter.jpg" alt="Clutter Button" width="133" height="62" id="Image5" onmouseover="MM_swapImage('Image5','','../photoshop_sliced_exports/overstates/images/clut ter_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../contact.htm"><img src="../photoshop_sliced_exports/btncontact.jpg" alt="Contact Button" width="142" height="62" id="Image6" onmouseover="MM_swapImage('Image6','','../photoshop_sliced_exports/overstates/images/cont act_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
                                <div id="main"><!-- TemplateBeginEditable name="content_area" -->
                                  <div id="contentbox"></div>
                                <!-- TemplateEndEditable --></div>
                              </div>
                            </div>
                          </div>
                          </body>
                          </html>

                          • 10. Re: Center web page on browser screen in Dreamweaver?
                            cenelson_stateline7 Community Member

                            I am having a similar problem. I read through and followed all directions in the "Centering a Page" forum. The content of the page will center, but my background image will not. Someone else had posted this question, but I didn't see the answer. Any help would be appreciated.

                            • 11. Re: Center web page on browser screen in Dreamweaver?
                              MurraySummers CommunityMVP

                              Without seeing your page and its underlying code, there is no way we can answer your question.  Please start a new thread and include a link to the live page.  That way we can see everything we need to answer without guessing and we don't clutter this thread with discussion that may be unrelated to the original question.

                              • 12. Re: Center web page on browser screen in Dreamweaver?
                                MurraySummers CommunityMVP

                                What's in photostyles.css?

                                • 14. Re: Center web page on browser screen in Dreamweaver?
                                  peterattrsb Community Member

                                  Now I am a little confused. I followed the exact instructions following your link. When I press "Live View" the page is centered but if I press f12 it's still all over to the left in the browser that opens.

                                  • 15. Re: Center web page on browser screen in Dreamweaver?
                                    Nancy O. CommunityMVP

                                    @Peter

                                    To center a web page you need 3 basic things:

                                     

                                    1. A valid document type  in your HTML markup.  Good news, DW does this for you when a create a new HTML page.
                                    2. A CSS container width.
                                    3. CSS margin-right and margin-left of *auto* (browser default).

                                     

                                    CSS Code:

                                     

                                    #container {

                                    width: 900px; /**adjust width in px, ems or %**/

                                    margin:0 auto; /**centered**/

                                    border: 1px solid green; /**for demo purposes only**/

                                    }

                                     

                                    HTML:

                                     

                                    <div id="container">

                                    YOUR PAGE CONTENT GOES INSIDE THIS CONTAINER

                                    </div>

                                     

                                    If this doesn't work, you'll need to post a URL to your page (preferred) or paste your HTML and CSS code into a web forum reply (not in email).

                                     

                                     

                                     

                                    Nancy O.

                                    Alt-Web Design & Publishing

                                    Web | Graphics | Print | Media  Specialists 

                                    http://alt-web.com/

                                    http://twitter.com/altweb

                                    • 16. Re: Center web page on browser screen in Dreamweaver?
                                      jsmcrawler Community Member

                                      I am having a similar problem. I believe I followed the instructions that you posted here correctly, and I did some reading about centering a page and displaying the page at 100% but I can't seem to make them work correctly.


                                      I designed a website which was 1000px wide and now they want it changed (they want an image on both sides of the page)-so instead of changing it around completely and trying to mess with the areas and buffers and all of that fun stuff. I decided to leave the #container (which is were all the data for the site is and were as the template is applied to other pages the size will change -the height will change but the width should stay 100px.)that was there and then wrapp it up completly in another div tag which i labeled #master_container then I inserted 2 more div tags and placed the images on either side as is desired. I followed the instructions above (because now the site is soo big displaying in a browser is diffacult). I need the site to do 3 things.

                                       

                                      -i need it to display centered on the page so that no matter what browser it is displayed in or what size screen it is viewed on it fits the center of the screen.

                                       

                                      -I also would like it to fit the screen of the person using it so that they see the whole page as one and there isn't a huge blank space on one of the sides -right now it is on the right.

                                       

                                      -if you know how to make the two images on the side of the screen scroll as the person scrolls down the page-(ie-so that they don't see part of the image sometimes and other parts of it when they move farther down-wouldl like it to scroll with them as they move down the page)

                                       

                                      HERE IS THE XHTML CODE OF MY SITE:

                                       

                                      <!DO.TYPE 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">

                                      </style>

                                      <link href="../Unicorn_main_layout_template_oldform - CopytestCSS.css" rel="stylesheet" type="text/css" />

                                      </head>

                                       

                                      <body>

                                      <div id="Master_container">

                                        <div id="ancestor_left"><img src="../Images/ancestor_cropped.jpg" width="659" height="1003" alt="ancestor right" /></div>

                                        <div class="container">b</div>

                                        <div id="ancestor_right"><img src="../Images/ancestor_cropped.jpg" width="659" height="1003" alt="ancestor_right" /></div>

                                      </div>

                                      </body>

                                      </html>

                                       

                                      HERE IS THE CSS STYLESHEET ATTACHED TO THE TEMPLATE I AM TRYING TO APPLY TO ALL OF THE PAGES OF THE SITE.

                                       

                                      @charset "utf-8";

                                      /* CSS Document */

                                       

                                      #body {

                                          text-align:center;

                                          margin: 0;

                                          padding: 0;

                                          width: 100%;

                                          height: 100%;

                                      }

                                      #Master_container {

                                          width: 2300px;

                                          margin: 0 auto;

                                          text-align: left;

                                          margin-right:auto;

                                          margin-left:auto;

                                         

                                      }

                                      #ancestor_left {

                                          float: left;

                                          width: 660px;

                                      }

                                       

                                      .container {

                                          height: auto;

                                          width: 1000px;

                                      }

                                      #ancestor_right {

                                          width: 660px;

                                          float: right;

                                      }

                                       

                                       

                                      THANK YOU VERY MUCH FOR YOUR HELP!!!

                                      • 17. Re: Center web page on browser screen in Dreamweaver?
                                        Nancy O. CommunityMVP

                                        @jsmcrawler,

                                        This is a duplicate of your other post.  See my reply below.

                                        http://forums.adobe.com/message/5052782#5052782

                                         

                                         

                                        Nancy O.

                                        • 18. Re: Center web page on browser screen in Dreamweaver?
                                          jeffburnes7 Community Member

                                          use margin: 0 ; in css.

                                          Not really sure what your asking.

                                           

                                          [link removed]

                                          • 19. Re: Center web page on browser screen in Dreamweaver?
                                            AEE3 Community Member

                                            Good day, I have read the above posts, and other posts/videos online, tried many, but none seem to work. I'm wondering if it's because the page elements have absolute positioning, but maybe someone can help. Below is the html code, then below that i've included the css coding, i realize it's not clean, but just want to address the centering issue at this time.

                                             

                                            Any help is appreciated, remember I'm not a coder

                                             

                                             

                                            <!DOCTYPE html>

                                            <html xmlns="http://www.w3.org/1999/xhtml">

                                             

                                            <head>

                                            <style type="text/css">

                                            .SectionTEXT {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                color: #666666;

                                                background-color: #FFFFFF;

                                                letter-spacing: normal;

                                                text-align: left;

                                                word-spacing: normal;

                                                position: relative;

                                                width: 542px;

                                                left: 400px;

                                                bottom: 20px;

                                                text-decoration: none;

                                            }

                                            .FooterTEXT {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 11px;

                                                font-style: normal;

                                                line-height: normal;

                                                font-weight: light;

                                                font-variant: normal;

                                                text-transform: none;

                                                color: #FFFFFF;

                                                height: 35px;

                                                width: 904px;

                                                position: relative;

                                                left: 10px;

                                                top: 10px;

                                            }

                                             

                                            #div_18 .SectionTEXT p a {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                font-weight: normal;

                                                font-variant: normal;

                                                color: #666666;

                                            }

                                             

                                            a:hover {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                font-weight: normal;

                                                font-variant: normal;

                                                text-transform: none;

                                                color: #FF0000;

                                                text-decoration: none;

                                            }

                                             

                                            .nameplate {

                                                font-family: Blue;

                                                color: #666;

                                                font-style: normal;

                                                font-weight: inherit;

                                            }

                                            .forwardSlash {

                                                font-family: Verdana, Geneva, sans-serif;

                                                font-style: normal;

                                                font-weight: inherit;

                                            }

                                            .verticalSlash {

                                                font-family: Arial, Helvetica, sans-serif;

                                                font-style: normal;

                                                font-weight: lighter;

                                                color: #03AAF3;

                                            }

                                            .namePlateNOW {

                                                font-family: "Briem Akademi Std Semibold";

                                                font-style: inherit;

                                                font-weight: inherit;

                                                color: #F00;

                                            }

                                            .efitnesslogo {

                                                color: #FFF;

                                                visibility: hidden;

                                            }

                                            #div_18 .SectionTEXT p a {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                visibility: visible;

                                                color: #666666;

                                            }

                                            #HD1 {

                                                position: absolute;

                                                height: 352px;

                                                width: 230px;

                                                left: 10px;

                                                top: 0px;

                                            }

                                            #HD2 {

                                                position: absolute;

                                                height: 352px;

                                                width: 230px;

                                                left: 240px;

                                                top: 0px;

                                            }

                                            #HD3 {

                                                position: absolute;

                                                height: 352px;

                                                width: 230px;

                                                left: 470px;

                                                top: 0px;

                                            }

                                            #HD4 {

                                                position: absolute;

                                                height: 352px;

                                                width: 230px;

                                                left: 700px;

                                                top: 0px;

                                            }

                                            .GhostedBar {

                                                position: absolute;

                                                height: 105px;

                                                width: 570px;

                                                left: -10px;

                                                top: 190px;

                                                background-image: url(IMAGES/WhiteBar.png);

                                            }

                                             

                                            .WHTGRYBAR{

                                                position: absolute;

                                                height: 70px;

                                                width: 955px;

                                                top: 369px;

                                                left: 0px;

                                                background-repeat: no-repeat;

                                                background-image: url(IMAGES/WHT_GRAY_BOX_WRAP.svg);

                                            }

                                             

                                            .WHTGRYSHADOW{

                                                position: absolute;

                                                height: 75px;

                                                width: 924px;

                                                top: 370px;

                                                left: 4px;

                                                background-repeat: no-repeat;

                                                background-image: url(IMAGES/WHT_GRAY_SHADOW.png);

                                            }

                                               

                                             

                                            .BkgrndNAV {

                                                background-color: #C3D3F2;

                                                height: 1200px;

                                                width: 897px;

                                                position: absolute;

                                                left: 31.5px;

                                                top: 362.5px;

                                                opacity:

                                            }

                                             

                                            #MembersFtrContainer {

                                                position: absolute;

                                                height: 65px;

                                                width: 944px;

                                                left: 8px;

                                                top: 1630px;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FFFFFF;

                                                border-bottom-width: 1px;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                                background: #ffffff; /* Old browsers */

                                                background: -moz-linear-gradient(top,  #ffffff 11%, #bfd3fc 55%, #3e78fd 100%); /* FF3.6+ */

                                                background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#ffffff), color-stop(55%,#bfd3fc), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */

                                                background: -webkit-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */

                                                background: -o-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Opera 11.10+ */

                                                background: -ms-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* IE10+ */

                                                background: linear-gradient(to bottom,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* W3C */

                                             

                                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-9 */

                                             

                                             

                                             

                                            }

                                             

                                             

                                            </style>

                                             

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

                                             

                                            <script id="form_init_script" data-name="" src="common/js/form_init.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="common/css/jquery-ui-1.8.5.custom.css"></link><link rel="stylesheet" type="text/css" href="common/css/normalize.css"></link><script type="text/javascript" src="common/libs_js/jquery-1.4.4.min.js"></script><link id="theme" href="theme/default/css/default.css" type="text/css" rel="stylesheet"></link><title>e-fitness NOW Origin</title><script type="text/javascript" src="common/libs_js/jquery-ui-1.8.9.custom.min.js"></script><script type="text/javascript" src="common/libs_js/jquery.ui.datepicker.js"></script><script type="text/javascript" src="common/libs_js/easyXDM/easyXDM.min.js"></script><script type="text/javascript" src="common/js/jquery.validate.js"></script><script type="text/javascript" src="common/libs_js/jquery.metadata.js"></script><script type="text/javascript" src="common/libs_js/jquery.placeholder.min.js"></script><script type="text/javascript" src="validation_data.js?249"></script><script type="text/javascript" src="common/js/validation.js"></script><script type="text/javascript" src="common/js/conditionals.js"></script><script type="text/javascript" src="common/js/lang/messages_validation.js"></script><script type="text/javascript" src="common/js/lang/messages_datepicker.js"></script>

                                             

                                            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                                            <meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>

                                            <link rel="stylesheet" href="jQuery/themes/base/jquery.ui.all.css?version=11">

                                            <style type="text/css">

                                            a:link {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                font-weight: normal;

                                                font-variant: normal;

                                                text-transform: none;

                                                color: #666666;

                                                text-decoration: none;

                                            }

                                            a:visited {

                                                text-decoration: none;

                                                color: #666666;

                                            }

                                            a:active {

                                                text-decoration: none;

                                                color: #666666;

                                            }

                                             

                                            body,td,th {

                                                color:#666666;

                                            }

                                            .hover {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                font-weight: normal;

                                                font-variant: normal;

                                                text-transform: none;

                                                color: #FF0000;

                                            }

                                            body {

                                                margin-top: 0px;

                                               

                                            }

                                             

                                             

                                            .NEWnav {

                                                position: absolute;

                                                height: 45px;

                                                width: 920px;

                                                left: 20px;

                                                top: 380px;

                                            }

                                            </style>

                                            <script src="jQuery/jquery-1.4.4.js"></script>

                                            <script src="jQuery/ui/jquery.ui.core.js"></script>

                                            <script src="jQuery/ui/jquery.ui.widget.js"></script>

                                            <script src ="jQuery/ui/jquery.ui.tabs.js"></script>

                                            <script>

                                             

                                            $(function(){

                                                    $("#Tab_5").tabs({});

                                                });

                                            function MM_swapImgRestore() { //v3.0

                                              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                                            }

                                            function MM_preloadImages() { //v3.0

                                              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                            }

                                             

                                            function MM_findObj(n, d) { //v4.01

                                              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                                                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                                              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                                              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                                              if(!x && d.getElementById) x=d.getElementById(n); return x;

                                            }

                                             

                                            function MM_swapImage() { //v3.0

                                              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                                               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                                            }

                                            </script>

                                            </head>

                                             

                                            <body bgcolor="#3E78FD" text="#666666" onLoad="MM_preloadImages('IMAGES/FitnessProgHvrClkBttn.png','IMAGES/What_HowHvrClkBttn.pn g','IMAGES/EnrollTodayHvrClkBttn.png','IMAGES/MemberLoginHvrClkBttn.png','IMAGES/GrnButton HvrClk.png','IMAGES/FitnessProgHvrClkBttn.svg','IMAGES/What_HowHvrClkBttn.svg','IMAGES/Enr ollTodayHvrClkBttn.svg','IMAGES/MemberLoginHvrClkBttn.svg','IMAGES/OriginHvrClkBttn1.svg', 'IMAGES/FitnessProgHvrClkBttn1.svg','IMAGES/What_HowHvrClkBttn1.svg','IMAGES/EnrollTodayHv rClkBttn1.svg','IMAGES/MemberLoginHvrClkBttn1.svg')">

                                             

                                             

                                             

                                                  

                                            <div id="div_1">

                                            <div align="center">

                                              <div id="HD1"><img src="IMAGES/DBS_FOTOSEARCH_u14758523.png" width="230" height="352" alt="Women Competitive Swimmer" /></div>

                                             

                                              <div id="HD2"><img src="IMAGES/DBS_FOTOSEARCH_u18569747.png" width="230" height="350" alt="Hurdler" /></div>

                                             

                                              <div id="HD3"><img src="IMAGES/DBS_FOTOSEARCH_u24747386.png" width="230" height="350" alt="Golfer" /></div>

                                              <div id="HD4"><img src="IMAGES/DBS_FOTOSEARCH_u21161806.png" width="230" height="351" alt="Marathon Runners" /></div>

                                              <div class="GhostedBar"></div>

                                            </div>

                                             

                                            <div class="overlayLOGO">

                                             

                                             

                                              <img src="IMAGES/efitnessLOGO_copy1.svg" alt="e fitness now" width="508">

                                             

                                            </div>

                                            <!--end overlayLOGO div-->

                                             

                                            </div>

                                             

                                            <!--end headerImage div-->

                                             

                                            <!-- end div_1-->

                                            </div>

                                             

                                            <div class="BkgrndNAV"></div>

                                             

                                            <div class="WHTGRYSHADOW"></div>

                                             

                                            <div class="WHTGRYBAR"></div>

                                             

                                            <div class="NEWnav">

                                             

                                            <a href="Index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Origin','','IMAGES/OriginHvrClkBttn1.svg',1)"><img src="IMAGES/OriginNormBttn1.svg" alt="Origin Page" width="180" height="45" id="Origin"></a>

                                                     

                                                 <a href="FitnessPrograms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FitnessPrograms','','IMAGES/FitnessProgHvrClkBttn1.svg',1)"><i mg src="IMAGES/FitnessProgNormBttn1.svg" alt="Fitness Programs Page" width="180" height="45" id="FitnessPrograms"></a>

                                                  

                                                   <a href="Learn.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Learn','','IMAGES/What_HowHvrClkBttn1.svg',1)"><img src="IMAGES/What_HowNormBttn1.svg" alt="Learn What & How" width="180" height="45" id="Learn"></a>

                                                  

                                                   <a href="Enroll.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Enroll','','IMAGES/EnrollTodayHvrClkBttn1.svg',1)"><img src="IMAGES/EnrollTodayNormBttn1.svg" alt="Enroll Today Page" width="180" height="45" id="Enroll"></a>

                                                  

                                                   <a href="Members.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Members','','IMAGES/MemberLoginHvrClkBttn1.svg',1)"><img src="IMAGES/MemberLoginNormBttn1.svg" alt="Members Page" width="180" height="45" id="Members"></a>

                                                  

                                            </div>

                                             

                                            <div id="div_18">

                                                <img src="IMAGES/FOTOSEARCH_x19148847.png" name="Image_14" id="Image_14" />

                                              <div class="INTROtext">

                                                <p>"WELCOME…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."</p>

                                              </div>

                                            </div>

                                             

                                            <div id="div_19">

                                                <img id="Image_15" src="IMAGES/stock-photo-12488366-man-playing-golf.png" />

                                              <div class="SectionTEXT">

                                                <p>Sports Conditioning &amp; <br>

                                                  Personal Fitness Programs: <br>

                                                  <a href="http://www.youtube.com/watch?v=4a0Q-IAqO8U" target="_blank" class="hover">Triathlons</a> | Running | Cycling<br>

                                                  Swimming | Climbing | Surfing…</p>

                                              </div>

                                            </div>

                                            <div id="div_20">

                                                <img id="Image_16" src="IMAGES/000014338250_HDFlashVideo copy.png" />

                                              <div class="SectionTEXT">

                                                <p>Full Course Videos: <br>

                                                  What We Do &amp; <br>

                                                How e|fitnessNOW Programs Work for You … </p>

                                              </div>

                                            </div>

                                            <div class="SectionTEXT" id="div_21">

                                                <img id="Image_17" src="IMAGES/stock-photo-17198908-success-flow-chart-on-a-blackboard.png" />

                                                <div class="SectionTEXT">

                                                <p><br>

                                                  Learn About Advanced Conditioning Programs…    </p>

                                              </div>

                                            </div>

                                            <div id="div_23">

                                                <img src="IMAGES/Bigstock_28225811.png" alt="Enroll Today Image of Track &amp; Field Hurdlers" id="Image_24" />

                                              <div class="SectionTEXT"> <br>

                                                  Fly Over Hurdles…<br>

                                                  Sign-Up with an e|fitnessNOW Trainer Today!

                                              </div>

                                            </div>

                                             

                                            <div id="MembersFtrContainer">

                                              <div id="MemberFtrInsideContainer">

                                                <div class="FooterTEXT">© 2012–2017 e|fitnessNOW and e|fitnessTRAINER. All rights reserved. web design: grafacha.com | web development: Content for  class</div>

                                              </div>

                                            </div>

                                             

                                            </body>

                                            </html>

                                             

                                             

                                             

                                            CSS

                                            @import url("webfonts/DroidSans/stylesheet.css");

                                             

                                             

                                            #div_1

                                            {

                                                height : 349px;

                                                left : 8px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 11px;

                                                width : 944px;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-bottom-width: 1px;

                                            }

                                             

                                            .headerImage {

                                                position: absolute;

                                                width: 923px;

                                                height: 350px;

                                                margin-left: 10px;

                                                }

                                               

                                            .overlayLOGO {

                                                position: absolute;

                                                top: 205px;

                                                background-repeat: no-repeat;

                                                width: 590px;

                                                height: 150px;

                                                left: 20px;

                                                visibility: visible;

                                                }

                                               

                                            #efitnessLOGO

                                            {

                                                width: 5.823in;

                                                height: 1.938in;

                                                position: absolute;

                                                top: 25px;

                                                left: 45px;

                                                visibility: visible;

                                            }

                                               

                                            #textheader_3

                                            {

                                                height : 104px;

                                                left : 46px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 11px;

                                                width : 451px;

                                                color : #575756;

                                                font-family : Arial,sans-serif;

                                                font-size : 78px;

                                                line-height : 104px;

                                                margin-top : 0;

                                                width : 100%;

                                             

                                            }

                                             

                                            #textheader_3 a

                                            {

                                                color : #575756;

                                                text-decoration : none;

                                             

                                            }

                                             

                                            #Tab_5

                                            {

                                                left: 0px;

                                                top: 369px;

                                                width : 960px;

                                                position: absolute;

                                                height: 55px;

                                            }

                                             

                                            #div_18

                                            {

                                                height : 220px;

                                                left : 8px;

                                                position : absolute;

                                                top : 440px;

                                                width : 944px;

                                                border-top: solid;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-top-color: #FF0A00;

                                                border-bottom-width: 1px;

                                                border-top-width: 1px;

                                                background-color: #FFF;

                                            }

                                             

                                            #Image_14

                                            {

                                                height : 220px;

                                                left : 0px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 0px;

                                                width : 380px;

                                            }

                                             

                                            #div_19

                                            {

                                                height : 220px;

                                                left : 8px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 680px;

                                                width : 944px;

                                                background-color : #ffffff;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-bottom-width: 1px;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                            }

                                             

                                            #Image_15

                                            {

                                                height : 220px;

                                                left : 0px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 0px;

                                                width : 380px;

                                            }

                                             

                                            #div_20

                                            {

                                                height : 220px;

                                                left : 8px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 920px;

                                                width : 944px;

                                                background-color : #ffffff;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-bottom-width: 1px;

                                            }

                                             

                                            #Image_16

                                            {

                                                height : 220px;

                                                left : 0px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 0px;

                                                width : 380px;

                                            }

                                             

                                            #div_21

                                            {

                                                height : 220px;

                                                left : 9px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 1160px;

                                                width : 943px;

                                                background-color : #ffffff;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-bottom-width: 1px;

                                            }

                                             

                                             

                                            #Image_17

                                            {

                                                height : 220px;

                                                left : 0px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 0px;

                                                width : 380px;

                                            }

                                             

                                            #div_23

                                            {

                                                height : 220px;

                                                left : 9px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 1400px;

                                                width : 943px;

                                                background-color : #ffffff;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FF0A00;

                                                border-bottom-width: 1px;

                                            }

                                             

                                            #Image_24

                                            {

                                                height : 220px;

                                                left : 0px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 0px;

                                                width : 380px;

                                            }

                                             

                                            #div_22

                                            {

                                                height : 300px;

                                                left : 8px;

                                                overflow : hidden;

                                                position : absolute;

                                                top : 1632px;

                                                width : 944px;

                                                border-top: solid;

                                                border-top-color: #FF0A00;

                                                border-top-width: 1px;

                                                border-bottom: solid;

                                                border-bottom-color: #FFFFFF;

                                                border-bottom-width: 1px;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                                background: #ffffff; /* Old browsers */

                                                /* IE9 SVG, needs conditional override of 'filter' to 'none' */

                                                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc 2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiB ncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogI CAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3R vcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JmZDNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZ mZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzhjYjBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ 9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTc4ZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+C iAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJ hdGVkKSIgLz4KPC9zdmc+);

                                                background: -moz-linear-gradient(top, #ffffff 0%, #bfd3ff 66%, #8cb0ff 84%, #3e78fd 100%); /* FF3.6+ */

                                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(66%,#bfd3ff), color-stop(84%,#8cb0ff), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */

                                                background: -webkit-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */

                                                background: -o-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Opera 11.10+ */

                                                background: -ms-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* IE10+ */

                                                background: linear-gradient(to bottom, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* W3C */

                                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-8 */

                                             

                                            <style>

                                                  #docContainer .fb_cond_applied{ display:none;     visibility: visible;

                                            }

                                             

                                                </style><noscript>

                                                  <style>

                                                  #docContainer

                                                  .fb_cond_applied{ display:inline-block; }

                                            </style>

                                            }

                                                

                                            #div_24 {

                                                height: 290px;

                                                width: 220px;

                                                background-color: #3e78fd;

                                                top: 11px;

                                                left: 246px;

                                                position: absolute;

                                                visibility: visible;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                            }

                                            #div_25 {

                                                height: 290px;

                                                width: 220px;

                                                background-color: #3e78fd;

                                                top: 11px;

                                                left: 479px;

                                                position: absolute;

                                                visibility: visible;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                            }

                                            #div_26 {

                                                height: 290px;

                                                width: 220px;

                                                background-color: #3e78fd;

                                                top: 11px;

                                                left: 710px;

                                                position: absolute;

                                                visibility: visible;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                            }

                                            a:hover {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 36px;

                                                font-style: normal;

                                                line-height: 45px;

                                                font-weight: normal;

                                                font-variant: normal;

                                                text-transform: none;

                                                color: #FF0000;

                                                text-decoration: none;

                                            }

                                            .INTROtext {

                                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                font-size: 18px;

                                                font-style: inherit;

                                                line-height: normal;

                                                font-weight: inherit;

                                                font-variant: normal;

                                                color: #666666;

                                                background-color: #FFFFFF;

                                                letter-spacing: normal;

                                                text-align: left;

                                                word-spacing: normal;

                                                position: absolute;

                                                width: 525px;

                                                left: 400px;

                                                bottom: 20px;

                                                text-decoration: none;

                                                top: 10px;

                                                text-align: justify;

                                            }

                                             

                                             

                                             

                                            #MemberFtrInsideContainer {

                                                background-color: #3e78fd;

                                                position: absolute;

                                                visibility: visible;

                                                height: 55px;

                                                width: 924px;

                                                left: 10px;

                                                top: 10px;

                                                border-left: solid;

                                                border-left-color: #FFFFFF;

                                                border-left-width: 1px;

                                                border-right: solid;

                                                border-right-color: #FFFFFF;

                                                border-right-width: 1px;

                                            }

                                            • 20. Re: Center web page on browser screen in Dreamweaver?
                                              Nancy O. CommunityMVP

                                              You can't center APDivs.

                                               

                                              My advice is to drop APDivs altogether.  You don't need them. You shouldn't use them except for very special situations anyway. Also your CSS code is unecessarily bloated with stuff you don't need. 

                                               

                                              Start with a simple centered layout like this one. 

                                               

                                              <!doctype html>
                                              <html>
                                              <head>
                                              <meta charset="utf-8">
                                              <title>HTML5 Layout</title>
                                              <style>
                                              body {
                                              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
                                              width: 1000px;
                                              margin: 0 auto; /**with width, this is centered**/
                                              padding: 0;
                                              color: #000;
                                              background: #069;
                                              }
                                              
                                              section {
                                              margin: 0;
                                              padding: 0;
                                              background: #FFF;
                                              overflow: hidden; /**float containment**/
                                              }
                                              
                                              header {
                                              margin: 0;
                                              padding: 0;
                                              min-height: 50px;
                                              background: #FFC
                                              }
                                              
                                              section aside {
                                              margin: 0 1%;
                                              padding: 0 1%;
                                              float: left;
                                              width: 29%;
                                              background: #FFF;
                                              border: 1px dotted #CCC;
                                              min-height: 100px;
                                              }
                                              /**clear floats afterwards**/
                                              aside-nth:child(3) {
                                              clear:left;
                                              }
                                              
                                              footer {
                                              min-height: 25px;
                                              background: #9CCDCD;
                                              overflow: hidden;
                                              }
                                              
                                              footer aside {
                                              float: left;
                                              width: 48%;
                                              padding: 0 1%;
                                              }
                                              
                                              /**re-usable classes**/
                                              .center {text-align:center}
                                              .right {text-align:right}
                                              
                                              /**TEXT STYLES**/
                                              h1, h2, h3, h4 {margin:0;}
                                              p {font-size: 1em}
                                              
                                              </style>
                                              
                                              <!--[if lt IE 9]>
                                              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                                              <![endif]-->
                                              </head>
                                              <body>
                                              
                                              <section>
                                              
                                              <header>
                                              <h1>Header</h1>
                                              </header>
                                              
                                              <!--columns-->
                                              <aside><p>Aside</p>
                                              <h3>Heading 3</h3>
                                              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                              Mauris vitae libero lacus, vel hendrerit nisi! 
                                              Maecenas quis velit nisl, volutpat viverra felis. 
                                              Vestibulum luctus mauris sed sem dapibus luctus. 
                                              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
                                              Quisque varius scelerisque nunc eget rhoncus. 
                                              Aenean tristique enim ut ante dignissim.</p></aside>
                                              
                                              <aside><p>Aside</p>
                                              <h3>Heading 3</h3>
                                              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                              Mauris vitae libero lacus, vel hendrerit nisi! 
                                              Maecenas quis velit nisl, volutpat viverra felis. 
                                              Vestibulum luctus mauris sed sem dapibus luctus. 
                                              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
                                              Quisque varius scelerisque nunc eget rhoncus. 
                                              Aenean tristique enim ut ante dignissim. </p></aside>
                                              
                                              <aside><p>Aside</p>
                                              <h3>Heading 3</h3>
                                              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                              Mauris vitae libero lacus, vel hendrerit nisi! 
                                              Maecenas quis velit nisl, volutpat viverra felis. 
                                              Vestibulum luctus mauris sed sem dapibus luctus. 
                                              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
                                              Quisque varius scelerisque nunc eget rhoncus. 
                                              Aenean tristique enim ut ante dignissim. </p></aside>
                                              </section>
                                              
                                              <footer>
                                              <aside>Footer &lt;aside&gt;</aside>
                                              <aside class="right">Footer &lt;aside .right&gt;</aside>
                                              </footer>
                                              
                                              </body>
                                              </html>
                                              
                                              

                                               

                                              Add a few styles for things you need and nothing you don't. Keep it simple.

                                               

                                               

                                              Nancy O.