How to center entire page

I've been trying to view my site on multiple computers to gauge how wide I shoud make the banners and contents and it just occured to me how much simpler this would be if I could somehow just have the entire page center itself automatically. Is there some way to put a div tag or something around the entire contents so that the page appears in the center of all browsers? If so, is this a good way to acheive a wider scope of viewability?

The easist way is to create a "wrapper" div, which will contain all of your content.
So I would create this rule in your css
#wrapper     {
     width:900px;
     margin:0px auto;
Then change this
<body>
<p>
to this
<body>
<div id="wrapper">
<p>
then change this:
</script>
</body>
to this
</script>
</div>
</body>
See if that works for you.
Gary

Similar Messages

  • How to center a page for all browsers?

    Could someone take a look at my code and tell me why the page isn't centered. When I'm at a school computer, the page is centered for Internet Explorer, but not for Chrome or Firefox. When I am on my home computer, the page isn't centered for any browser. If you could test your solution for at least 2 of the 3 main browsers, that would be wonderful! Thanks in advance!
    Also, Dreamweaver CC.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    body {
      background-image: url(images/background.png);
      background-repeat: repeat;
      font-family: "French Script MT";
      display: table-cell;
      vertical-align: middle;
      position: relative;
      color: #B9AB90;
    Memories {
            font-family: "Arial Black", Gadget, sans-serif;
            font-size: 18pt;
            color: #360D11;
    .Text {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: #7A2500;
            font-style: normal;
            font-weight: bold;
    .Bottom {
      font-family: Tahoma, Geneva, sans-serif;
      color: #000000;
    .SessionMain {
      color: #170C03;
      font-family: special-elite;
      font-style: normal;
      font-weight: 400;
      font-size: 24pt;
    .SessionHead {
      color: #4C3223;
      font-family: ewert;
      font-style: normal;
      font-weight: 400;
      font-size: 40pt;
      vertical-align: middle;
      text-align: center;
    </style>
    <meta name="keywords" content="test,test2" />
    </head>
    <body background="images/background.png">
    <p><a name="Top" id="Top"></a></p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="70"> </td> <!-- Width here will set how far from the left the page is -->
          <td><div align="center">
            <table width="1030" border="0" cellpadding="0">
        <tr>
          <td width="395" rowspan="2"><table width="394" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
            <tr>
              <td width="376"><div align="center"><img src="image.png" width="350" height="171" alt="logo" /></div></td>
              </tr>
            </table></td>
          <td height="100"> </td>
          </tr>
        <tr>
          <td width="629" height="87"><table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
            <tr>
              <td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>
              </tr>
            </table></td></tr></table></div>
    <div align="center"></div>
    <p></p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td height="73"> </td>
          <td width="629" height="87"><div align="center">
            <table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
              <tr>
                <td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>
                </tr>
            </table>
          </div>
            <div align="center"></div></td>
          <td> </td>
          </tr>
        </tbody>
    </table>
    </p>
    <div align="center">
      <table width="1020" border="2" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td height="210"><div align="center" style="font-size: 36px">Content</div></td></tr></tbody></table>
    </div>
    <p> </p>
    <div align="center">
      <table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td width="15" rowspan="2" bgcolor="#2E190B"> </td>
            <td width="986" height="18" bgcolor="#2E190B"> </td>
            <td width="15" rowspan="2" bgcolor="#2E190B"> </td>
            </tr>
          <tr>
            <td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="2%"> </td>
                  <td width="98%"><p class="Bottom"><a href="#Top"><a href="#Top">Back To Top</a></p>
                    <p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>
                  </tr>
                </tbody>
              </table></p>
              </td>
            </tr>
          </tbody>
      </table>
    </div>
    </body>
    </td>
        </tr>
      </tbody>
    </table>
    </html>

    I also determined that the page displays differently based on whether it's on a local hard drive (not centered in IE, Chrome, or Firefox) or if it's being stored on server (centered in IE, not in Chrome or Firefox). Any idea why and how I can fix it?

  • How to center web page made in indesign cs5

    Hi everyone,
    I'm new to this forum and I hope I'll get help, because I need it
    I've made a web page in indesign cs5, exported in SWF and generated HTML.
    My swf file looks good, but my html file is not centered, web page is positioned
    in upper left corner, and I want it to be in the center.
    How can I put it there?
    Thnx very much!
    Hresta

    I know ID is not the best option for a website, but I need it that way.
    I know html/css, but my generated html file contains javascript which
    I'm not familiar with :/
    There's no div so I don't know where to put my auto margins?
    Simply on top of the html file?
    Thnx anyway!!

  • HOW TO Export Entire Page Report, Not Just Regions, To CSV or Excel?

    I need to export a main report (Page 2014) that consists of 5 different regions (Name, Feature, States, Admin Areas, and Maps), as one CSV file.
    I know that I can set each of the 5 different region's report attributes to export by enabling the CSV output to Yes.
    But , since my main report (Page 2014) has these many regions, I end up with 5 different CSV files.
    There is no attribute to set for the main report (Page 2014) to enable it to export as CSV output.
    How can I get an all-encoompassing CSV file of the main report (Page 2014)?
    Thank you in advance,
    Maggie

    Hello Maggie,
    >> How can I get an all-encoompassing CSV file of the main report (Page 2014)?
    This might be possible using the advanced print server configuration, with BI Publisher, using the same technique that is being used to print master-details reports (which is a type of a multi-region report) - http://www.oracle.com/technology/products/database/application_express/html/configure_printing.html . The standard print server configuration only supports reports with a single region. If you have BIP in your organization, that’s great. Otherwise, CSV files don’t warrant it.
    The only other option, I can see, is to create the CSV file manually, using the technique described in the following Blog entry, by Scott Spendolini - http://spendolini.blogspot.com/2006/04/custom-export-to-csv.html .
    Regards,
    Arie.

  • Muse horinzontal site how to center the pages

    Please take a look at this site, some pages are not centred, What tot do about it? Any tips?
    Home

    Hi
    You may simply place below mentioned meta information in master page's page properties for phone layout :
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    take a look :
    I hope this helps.

  • How to make a picture fit an entire page in a pages

    how to make a picture fit an entire page in a pages

    Hello belluchis,
    Thanks for using Apple Support Communities.
    After inserting your image into your Pages document, follow the instructions in the Pages help section below to learn how to manipulate the object:
    Resize, rotate, and flip an object - Pages Help for Mac
    http://help.apple.com/pages/mac/5.2/#/tan114930688
    Take care,
    Alex H.

  • How to secure one page not entire application?

    Hi there,
    I'm looking for some guidance on how to secure individual pages on my site. I've read a number of articles discussing creating a login using the Application.cfc. The thing is this approach locks down the entire site. I only want to secure a page. In my scenario, if the user hasn't logged in, and goes to a profile.cfm page, they will be asked to login. Once they login, they will then be directed to the profile.cfm page.
    Any and all advice would be greatly appreciated.
    Thanks.
    Novian

    Hi, Novian,
    An option that come directly to mind is to check for the specific page to be locked down in onRequestStart of your Application.cfc.
    This approach is relatively easy to implement but may not be the best approach (don't know how it might affect performance or something else). Basically, use a conditional in your onRequestStart method to see if the page being requested by the user is the page that needs to be secured. Something along the lines of:
    <cffunction name="onRequestStart">
         <cfargument name="target_page" />
         <cfif target_page is 'super-secure-page.cfm'>
              <!--- security stuff --->
         </cfif>
    </cffunction>
    There are, of course, other options but this was a quick and easy one that came right to mind.

  • How can I adjust ADE so that I can see the entire page of a graphic novel (.epub)?

    How can I adjust ADE so that I can see the entire page of a graphic novel (.epub)?

    You can reduce or increase the font size of the page according to the way you like. Click on "Reading" under the Menu option -> "EPUB Text Size". Select appropriate font size from this option.
    Reduce or decrease the font size so that you can see the entire page.

  • How do I put page number at the center of the bottom of page one and the rest of the page numbers at top right corner?

    How do I put page number at the center of the bottom of page one and the rest of the page numbers at top right corner?

    Put a section break at the bottom of page 1
    Then insert your page number in the footer of page 1.
    Go to page 2 and click in the body of the text;
    Inspector > Layout > Section > uncheck Use Previous Headers & Footers > click in Header on page > insert > Page Number
    Peter

  • How to center align preview page

    When I preview my webpage (which I am creating in fireworks) in the browser it is to the left of the page, How do I center align it?? Thank you in advance for your help

    You shouldn't be creating your total web page in Fireworks, only the graphics  :-)
    You should slice up the images you need and then export those and use them in your HTML or via the stylesheet as background images.  A web page that is full of images will only slow down the loading plus not be indexed by search engines...
    To then center the page, you need to use CSS to to align the page in the center of the browser window regardless of window size.  This again, is done when you move over to the HTML editor, not in FWs.
    A good tutorial that may help the transition from taking a FWs comp to HTML
    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
    Nadia
    Adobe® Community Expert : Dreamweaver
    Unique CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    Book: Ultimate CSS Reference
    http://www.sitepoint.com/launch/005dfd4/3/133
    http://twitter.com/nadiap

  • How to center page in any size browser window

    How do I center a page in any size browser even if page is too wide to display - I still want the page displayed from the center and hide the edges as the browser width gets narrower. E.g. I have 3 columns and want to always see the central column - the outside columns will be visible only on a wide screen, but only the central column is visible on a narrower screen such as a smartphone. I have set the margins of my wrapper div to auto, but this only centralises the page until the wrapper width is the same width as the browser window. Help me please !

    Thanks Nancy O,
    Using the % as a width does now allow the page to remain centred.
    Is there a way to keep the web page size as original even when the window gets smaller - i.e.you will only see the outside edges of the page by using the slidebar left or right if viewing in a smaller window. Ioriginally set the wrapper div width to 700px rather than 90%, but when I reach a browser window of 700px, the page then reduces in width towards the left rather than reducing it centrally.
    I don't know how to link to my page as it is not yet a live page, so can't show you specific code. Hope the above explains what I am trying to do. Basically, the two outside columns will be less important info, so I don't need this to always be visible, but if viewing my page on a smartphone, I want the central area to be seen in full (approx. 450px wide), and not reduce in size.
    Thanks for your help,
    ActivePlanner.

  • How to center page in Split and Design view?

    When I look at my template in Design or Split View, it is flush right on my screen with a top margin of 20 px or so. But when I check it in Live View, or when I preview it on Firefox/Safari/Chrome/Opera, it is centered and flush against the top of the screen.
    I should add that the template was fine in Design and split, until I started mucking about the a spry menu. My page fell apart, I deleted the spry with plans ot start over. But then I discovered my template flush right (in Design and Split, anyway).
    Can anyone please tell me how to correct this? I suppose it's more of a nuisance than a tragedy, as long as the page is centered when it goes online. But it is a nuisance to work on the right side of the screen.
    Coding follows:
        margin-top: 0px;
        margin-left: 0px;
    #wrapper {
        background-image: url(../template%20images/mainBody.jpg);
        background-repeat: repeat;
        overflow: hidden;
        width: 800px;
        background-color: #CCC;
        margin-right: auto;
        margin-left: auto;
    #wrapper #header {
        height: 150px;
        width: 800px;
        background-color: #CCC;
        background-image: url(../template%20images/header.jpg);
    #wrapper #navBar {
        height: 55px;
        width: 800px;
        background-color: #666;
        background-image: url(../template%20images/navBar.jpg);
    #wrapper #mainBody {
        width: 80%;
        margin: 0 auto;
        padding-top: 20px;
        font-family: Arial, Helvetica, sans-serif;
    #wrapper #footer {
        background-image: url(../template%20images/footer.jpg);
        width: 800px;
        height: 60px;
        text-align: center;
        font-size: 16pt;
        clear: both;
    <!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>2000_template</title>
    <!-- TemplateEndEditable -->
    <link href="../CSS/layout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    </div><!--close header-->
    <div id="navBar">
      </div><!--close navBar-->
    <div id="mainBody"><!--begin mainBody--><!-- TemplateBeginEditable name="mainContent" -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor libero, aliquam vitae scelerisque in, malesuada non neque. </p>
      <p>Phasellus dignissim arcu eget velit posuere vel varius magna dapibus. Phasellus pharetra imperdiet nunc, vel interdum dolor fermentum id. Integer luctus mollis tempor. Nunc lacus urna, blandit sollicitudin cursus at, ultrices et erat. Sed rhoncus, ipsum vitae dictum scelerisque, diam felis euismod augue, a facilisis massa augue ut nibh. </p>
      <p>Sed ac ante magna. Nulla consequat posuere ullamcorper. In interdum, elit sed tempor suscipit, quam mauris egestas justo, sed lobortis sem magna a mi. Etiam tincidunt fringilla sapien, congue condimentum augue adipiscing ut. Nam pretium egestas lacus in elementum. Vivamus eros erat, varius nec aliquam quis, congue at orci.</p>
    <p>Vivamus eget felis purus, in porta tellus. Nullam ac orci eu arcu luctus ornare. Aliquam quis ligula metus. Morbi congue cursus justo, et sagittis sem adipiscing blandit. </p>
    <p>Quisque sed bibendum nisi. Curabitur ultrices imperdiet lacus in ullamcorper. Etiam pulvinar magna et neque congue eu aliquam metus semper. </p>
    <!-- TemplateEndEditable --></div>
    <!--close main body-->
    <div id="footer"><!-- TemplateBeginEditable name="footerPage" -->
      <p> &#8249; &#8249; Previous    1 :: 2 :: 3 :: 4    Continue &#8250; &#8250;</p>
    <!-- TemplateEndEditable --></div><!--close footer-->
    </div><!--close wrapper-->
    </body>
    </html>

    Get rid of this.
        margin-top: 0px;
        margin-left: 0px;
    The universal selector (asterisk) applies whatever styles you give it to  EVERY PAGE ELEMENT regardless of where it is.  So unless you know  exactly what you're doing, don't use universal selectors.
    To center your page
    body {
    width:900px /**some width in pixels, ems or %}
    margin:0 auto;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • How can I use an image as background for the entire page?

    With CSS mill, the solid color was defined in the color.X.property file and there is no place to define an image to use as the background? Is it doable to use an image as the background for teh entire page? If so, where to add it and how to implement? Thank you!
    Hao Pan ([email protected])

    While I have been able to add the image to a JLabel and insert it into frames, so that it looks like a suitable background, I have found it impossible to place any other component over the top of said imageDid you set a layout manager for the label?
    Check out the [Background Panel|http://www.camick.com/java/blog.html?name=background-panel] for two different solutions depending on your exact requirement.

  • How do i change the color of an entire page from white to black?

    how do i change an entire page from white to black?
    thanks

    If you want all your pages to have a black background, make that background object a Section Master object too.
    Format > Advanced > Move Object to Section Master.
    Jerry

  • How can I copy and paste an entire page on the new Pages?

    How can I copy and paste an entire page on the new Pages?

    Open one document in Pages v5.5.3, Open a second document in Pages v5.5.3. Select, copy, and paste one page between source and destination documents. Document objects such as Text boxes, shapes, images, tables, etc must be individually selected, copied, and pasted.

Maybe you are looking for

  • New movies do not show up in appletv

    Hi all, I have an appletv1, always worked great. Buts ince today new movies I add to my itunes will not show up on appletv. It does show the movies that were already there, but not new ones I add - even though they are the right format and I can see

  • Can i copy songs from my ipod to a folder in my pc?

    I want to copy songs from my ipod to a folder in my pc but when i attempt to copy, the paste is not active

  • How to create a Group in AD from OIM

    Hi all, I am using AD connector in OIM 11g R1, According to the documentation (About the Connector) I should able to create group in AD from OIM. Can any bady help me how to do that. Thanks Tamim Khan

  • The truth about pagefile (SSD)

    Good afternoon! Two years ago you guys (especially Harm) helped me to build a PC for Premiere. After two years I had to update my disks setup and decided to buy a Samsung 830 SSD for OS. Now, after I've read tons of informations about how to setup th

  • Where can I find Java for my iMac OS X 10.7.2? I would like to print coupons....

    Where can I find Java for my iMac OS X 10.7.2? I'd like to print coupons and the pop-up says that Apple has their own version of Java. I don't even know what it's called!