Center web page on browser screen in Dreamweaver?

Report · Jul 21, 2009

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?

Report · Jul 21, 2009

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:

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. 😉

Report · Jul 24, 2009

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?

Report · Jul 21, 2009

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>

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

</div>

</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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 24, 2009

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

Report · Jul 25, 2009

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-7cc7a.html

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

<body>

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 22, 2009

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.

Report · Jul 25, 2009

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


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>UNTITLED</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.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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_exports/overstates/images/Photo_over.jpg','../photoshop_sliced_exports/overstates/images/art_over.jpg','../photoshop_sliced_exports/overstates/images/clutter_over.jpg','../photoshop_sliced_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/Portfolio_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/Photo_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/clutter_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/contact_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>

Report · Jul 25, 2009

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 25, 2009

<!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>Di</title>

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


<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.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

Report · Sep 06, 2011

What's in photostyles.css?

Report · Sep 06, 2011

I have posted a new thread : javascript:;

Report · Sep 06, 2011

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.

Report · Sep 06, 2011

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.

Report · Feb 08, 2012

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.

Report · Feb 08, 2012

@Peter

To center a web page you need 3 basic things:

A valid document type in your HTML markup. Good news, DW does this for you when a create a new HTML page.
A CSS container width.
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:

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 06, 2013

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

<head>

<title>Untitled Document</title>

</style>

</head>

<body>

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

Report · Feb 06, 2013

@jsmcrawler,

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

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

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 22, 2013

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>

<head>

.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;

}

.WHTGRYBAR{

position: absolute;

height: 70px;

width: 955px;

top: 369px;

left: 0px;

background-repeat: no-repeat;

}

.WHTGRYSHADOW{

position: absolute;

height: 75px;

width: 924px;

top: 370px;

left: 4px;

background-repeat: no-repeat;

}

.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>

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>

$(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)&&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.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}

}

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)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

</head>

</div>

</div>

</div>

</div>

</div>

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

<p>Sports Conditioning & <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>

<p>Full Course Videos: <br>

What We Do & <br>

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

</div>

<p><br>

Learn About Advanced Conditioning Programs… </p>

</div>

Fly Over Hurdles…<br>

Sign-Up with an e|fitnessNOW Trainer Today!

</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/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JmZDNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzhjYjBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTc4ZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

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;

}

Report · Feb 23, 2013

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 12, 2013

use margin: 0 ; in css.

Not really sure what your asking.

[link removed]

Center web page on browser screen in Dreamweaver?

1 Correct answer