Centering divs horizontally

I have 4 divs on a fluid grid that I am trying to center inside a a navigation div. does anyone know how to do that?
As you can see the 4 divs will be used as navigation buttons. what I would like to do is get them spread out so they are always center to each other no matter how big the screen is.
I would like to see:
space - div - space - div - space - div - space - div - space.

Use an unordered list for your menu items. To Illustrate, copy & paste the following code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Menu</title>

<style>
/***add these to your CSS Reset***/
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
nav {
width: 960px;
/**with width, this is centered**/
margin:0 auto;
background: #555;
color: #FFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
nav li {
list-style:none;
box-shadow: inset 1px 2px 12px #F00;
display:inline-block;
width: 9em;
line-height:6em;
/**space between items**/
margin: 10px 4.75%;
border: 1px solid #CCC;
text-align: center;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
cursor:pointer;
nav li:hover {
background-color:#FFF;
color:#000;
</style>
</head>
<body>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
</html>
This is what it looks like in Firefox:
Nancy O.

Similar Messages

Centering a Div Horizontally

Hello,
I need help centering a div horizontally with CSS. What I'm trying to do is get this box that will contain text to center on the page and then I will expand it's width to match the image right above it, to fit the design.
Here is my code (i made the code of the div that I want to center within the document bold):
<!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 name="description" content="Lorentz Painting Co.: Pristine, Precise and Professional" />
<meta name="keywords" content="Maciej Lorenz, paint, high quality, interior, exterior, co., painting, professional, New England, Vermont, Nassachussetts, Boston, New York New Hampshire, New England" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Nantucket Gift Basket Company</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
    background-image: url(shingles1.jpg);
    background-repeat: repeat;
a:link {
    text-decoration: none;
    color: #FFF;
a:visited {
    text-decoration: none;
    color: #FFF;
a:hover {
    text-decoration: none;
    color: #FF0;
a:active {
    text-decoration: none;
    color: #FF0;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-7']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="wrapper-1">
<div id="branding">
    <h1><img src="Nantucket Products_editedsmaller.jpg" width="482" height="326" /></h1>
        <p> </p>
        <div id="content-2">
      <div class="content-wrap">
        <p> </p>
        <p>ddddddddddddddddddddddddddddddddddddddddddddd</p>
        <p> </p>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <h1> </h1>
    <div id="wrapper-2">
      <div id="wrapper-3">
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p> </p>
        <p><a href="index.php" title="Lorentz Painting; Why us? We are the best and most affordable painting company in New England, MA, NH, NY, VT, CT, ME and etc.">Home</a> - <a href="gift_baskets.php" title="Lorentz Painting Co.: Products & Services; nothing but the finest painting products that can be found in the market., New England, VT, NH, MA, NY, CT, ME">Gift Baskets</a> - <a href="contact.php" title="Contact Lorentz Painting Co. Today for the best painting value in New England, VT, NH, MA, NY, CT">Contact</a></p>
<p><strong><a href="sitemap.html" title="Site Map of Lorentz Painting Co. the most professional and highest quality painting company in New England, VT, NY, NH, MA, ME, CT">The Nantucket Gift Basket Co., 2011</a></strong></p>
        <p><strong><a href="http://cwws.org" title="Common Wealth Web Solutions" target="_new">Designed by CWWS</a></strong>      </p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("Lorentz Painting Co.: The best value in painting in New England, NY, VT, NH, MA, ME, CT. A professional company that produces high quality results.");
swfobject.registerObject("Lorentz Painting Co.: The most Pristine, Precise and Professional Painting Company in New England, NY, VT, NH, MA, ME, CT.");
swfobject.registerObject("Lorentz Painting Co.: High Quality painting at an affordable price. Serving New England, NY, VT, NH, MA, ME, CT.");
</script>
</body>
</html>

Thank you guys for bringing me good advice/info, I attempt to put it to use tonight and I will get back to you and let you know how it goes.
Thanks!
Date: Tue, 7 Jun 2011 21:39:44 -0600
From: [email protected]
To: [email protected]
Subject: Centering a Div Horizontally
Have a look at the following simplified example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
     height: 100%;
     background: #CCC;
body {
     width: 960px;
     margin: auto;
     background: #FCF;
     height: 100%
h1 {
     margin: 1.5em 20px;
#header {
     width: 482px;
     margin: auto;
     height: 326px;
     background: #FF9;
     text-align: center;
</style>
</head>
<body>
<div id="header">
<p>this is the space for your image</p>
</div>
h1. This can be a header
</body>
</html>
Notice how, with a block element, the width is set to a value combined with a margin set to auto. This principle can be used for any block element including BODY
The idea is to keep it simple
Gramps
>

Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.

This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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 name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
    color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    border-top:5px dotted #003399;
    border-bottom:5px dotted #003399;
    margin:20px;
#menu4 ul li a{
    color: #003399;
    padding: 10px 5px 10px 10px;
    width: 170px;
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    font-family: Georgia, serif;
    font-size: 13px;
    color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
    <div id="branding">
      <h1>
      <div>
        <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
      <div id="flash">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
        <param name="movie" value="LorentzBanner.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          </div>
          
        </object>
        
      </object>
      </h1>
<div>
<div id="menu4">
    <ul>
      <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
      <li><a href="">Services<span class="text">What we do</span> </a> </li>
      <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
      <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
    </ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
      <div></div>
    </div>
    <div id="wrapper-2">
      <div id="content-top" class="png"></div>
      <div id="wrapper-3">
        <div id="content-1">
          <div class="content-wrap">
            <p>Home</p>
            <p>Contact</p>
          </div>
        </div>
        <div id="content-2">
          <div class="content-wrap">
stuff
<p> </p>
          </div>
        </div>
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
        event: "click",
        collapsible: false,
        autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #6B6B6B;
    background: #8D927C url(images/bg_body.jpg) repeat-x;
    margin: 0;
    padding: 0;
    min-width: 800px;
    text-align: center;
    background-color: #000;
h2, h3, h4
    font-size: 16pt;
    font-weight: normal;
    margin: 15px 0 0 0;
#wrapper-3 p
    padding: 0;
    line-height: 1.35em;
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;
#wrapper-3 ul
    list-style-type: none;
    margin: 8px 0;
    padding: 0;
#branding
    margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
    color: #4f4f3f;
a:hover, a:active
    color: #000000;
@Inline image styles
img.float-left
    float: left;
    margin: 0 6px 6px 0;
img.float-right
    float: right;
    margin: 0 0 6px 6px;
img.border
    background: #FFF;
    padding: 2px;
    border: 1px solid #999;
@Tab navbar styles
#hornav ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0;
    text-align: center;
    margin-bottom: 60px;
    font-size: 0.8em;
    text-transform: uppercase;
#hornav ul li
    display: inline;
    margin: 0 2px 0 0;
    padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
    height: 400px;
#hornav ul li a
    text-decoration: none;
    margin: 0;
    background-repeat: inherit;
    background-position: center center;
    padding-top: 50%;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
    color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
    color: #000000;
@Secondary navigation styles
#navcontainer
    background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
    margin: 0;
    padding: 12px 0 0 0;
#navcontainer ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0 0 12px 0;
    border-top: 1px solid #FFF;
    background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
    display: block;
    padding: 3px 6px;
    width: 168px;
    margin: 0 10px;
    background-color: #c4bfac;
    border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
    color: #FFF;
    text-decoration: none;
#navcontainer a:hover
    background-color: #90937e;
    color: #FFF;
@Masthead text styles
#branding
    margin: 0;
    padding: 0;
#branding h1
    color: #000;
    padding: 10px 0 0px 0;
    border-top: 4px solid #656e5d;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    margin: 0;
@Layout styles
#wrapper-body
    background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
    width: inherit;
    margin: 0;
    padding: 0;
#wrapper-1
    width: auto;
    background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
    margin: 0;
    padding: 0;
#wrapper-2
    width: 45em;
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#wrapper-3
    background: url(images/bg_wrapper-3.jpg) repeat-y;
    color: #333;
    text-align: left;
#content-top
    margin: 0;
    height: 1em;
    background: url(images/bg_content-top.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
#content-1
    float: left;
    width: 12em;
    font-size: 0.9em;
    padding: 0;
    margin-top: 2em;
    margin-right: 2em;
    margin-bottom: 0em;
    margin-left: 0em;
#content-2
    float: left;
    width: 40em;
    padding: 0;
    font-size: 0.8em;
    margin-top: 2em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: 0em;
#content-3
    float: left;
    width: 250px;
    font-size: 10pt;
    margin: 0;
    padding: 0;
#content-4 {
    width: 190px;
    padding: 0px;
    line-height: 0px;
#content-bottom
    clear: both;
    height: 1em;
    background: url(images/bg_content-bottom.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
.content-wrap
    margin: 0;
    padding-top: 0px;
    padding-right: 2em;
    padding-bottom: 5px;
    padding-left: 0px;
#footer p
    font-size: .75em;
    margin: 12px 0;
p.content-wrap {
    font-size: 9pt;
    color: #999;
@Blog post styles
.date
    float: left;
    height: 52px;
    width: 52px;
    background: url(images/date.png) no-repeat;
    margin-right: 10px;
    padding-top: 0px;
    line-height: normal;
.date .month
    display: block;
    text-align: center;
    color: #FFF;
    font-size: 11px;
    padding-top: 4px;
    text-transform: uppercase;
.date .day
    display: block;
    text-align: center;
    padding-top: 5px;
    color: #222;
    font-size: 18px;
    font-weight: bold;
.meta
    display: block;
    font-size: 11px;
    color: #666;
    clear: right;
.blog-entry
    clear: both;
    padding-top: 2px;
#searchform
    margin: 8px 0;
    padding: 0;
@Search form styles
#searchform fieldset
    margin: 0;
    padding: 0;
    border: 0;
#searchform label
    color: #999;
    display: none;
#searchform input
    width: 160px;
    color: #222;
#searchform #submitquery
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
    line-height: 1.35em;
    text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
    line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
    font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
    display: none;
#website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 3em;
.fieldname {
    font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
    width: 829px;
    margin: 0 auto 0 auto;
#menu4 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    border-top:5px dotted #c7e7f3;
    border-bottom:5px dotted #c7e7f3;
    float:left;
    clear:both;
    margin:20px;
    text-align:center
#menu4 ul li{
    float:left;
#menu4 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#66b8d8;
    width:170px;
#menu4 ul li a span{
    display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
#menu4 ul li a:hover span.text{
    visibility:visible;
Thanks!

Preloader is now centering although horizontal and verticle slider are showing up.

preloader is now centering although horizontal and verticle scroll are showing up. M y question is how do I get rid of the horizontal and verticle scollon the man page now that the preloader centering code has been
added in to the edge file from dreamweaver. I dont think you can get rid of the horizontal and vertcle scoll bars from the edge menu the stage propertie menu is blocked once you plac the codde for the centering preload from dreamweaver.
here is the codde I entered with dreamweaver can it be altered or somthing to get rid of scroll bars on the main page that showed up after I placed the code in the html(created origanlly with edge) with dreamweaver.
<body style="margin:0;padding:0;height:100%;background-image:url(back2.jpg);">
<div id="container" style="margin:0;padding:0;height:100%;background: url(images/loader-bar.gif) no-repeat center center;">
          <div id="Stage" class="EDGE-19258028">
</div>
</body>
the entire code looks like this in dreamweaver
<!DOCTYPE html>
<html style="height:100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>
    <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="musicwebpage_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-7449833 { visibility:hidden; }
    </style>

</body>
</html>
<body style="margin:0;padding:0;height:100%;background-image:url(back2.jpg);">
<div id="container" style="margin:0;padding:0;height:100%;background: url(images/loader-bar.gif) no-repeat center center;">
          <div id="Stage" class="EDGE-19258028">
</div>
</body>

The songs that show the "note" were they downloads directly from iTunes? iTunes downloads all have artwork. If not, you will get that 50/50 chance of no album cover art. I had to look up the songs (of the ones I was importing at the time) artwork on "Google". Then I would just add the pic for the artwork myself. No more blanks ("or notes") Just beautiful pics to scroll through....

How to center 6 divs in a container div - horizontally

I'm trying to build a Fluid Grid website with DW CC.
For now I have a problem which I can't solve.
I have six links in a nav bar. Every link has different block sizes, so I arranged that with CSS.
Now I like to have those divs, which are in a container div, horizontally centered in that container div.
The link-divs are now left aligned, the text in each div is centered.
I show you the HTML part of the links and the CSS for the navigation.

<div class="nav_container">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
.nav_container {
          display: inline-block;
          position: relative;
          width: 100%;
          text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
          color: #DCDCDC;
          text-decoration: none;
          text-align: center;
.block1 {
          width: 60px;
          float: left;
.block2 {
          width: 150px;
          float: left;
.block3 {
          width: 85px;
          float: left;
.block4 {
          width: 90px;
          float: left;
.block5 {
          width: 80px;
          float: left;
.block6 {
          width: 80px;
          float: left;

You would add up all of the block widths which comes to 545px then wrap the blocks in a blockWrapper <div> and set its width: 545px; and margin: 0 auto; which will center the blocks horizontally (see full code below)
On another note it doesn't seem like a very fluid design if you're using fixed width px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.nav_container {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
color: #DCDCDC;
text-decoration: none;
text-align: center;
.block1 {
width: 60px;
float: left;
.block2 {
width: 150px;
float: left;
.block3 {
width: 85px;
float: left;
.block4 {
width: 90px;
float: left;
.block5 {
width: 80px;
float: left;
.block6 {
width: 80px;
float: left;
.blockWrapper {
    width: 545px;
    margin: 0 auto;
</style>
</head>
<body>
<div class="nav_container">
<div class="blockWrapper">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
</div>

</body>
</html>

Centering Image Horizontally within Div Layer

I've placed an image inside a div layer. The div layer is 200 pixels wide by 200 pixels high. My image is 480 pixels x 720 pixels. So the layer is smaller than the image. How do I center the image horizontally within my div layer? I've applied a css rule on the layer as followed:
#pictureframe {
position:absolute;
width:200px;
height:200px;
overflow: hidden;
text-align: center;
vertical-align: middle;
display: inline-block;
Because the image is larger than the div layer the image doesn't want to center horizontally. It seem to justify itself on the left side of the div layer even though I've applied a text-align: center on it. Any suggestions.

Make your division at least as wide as your image. Height of divisions should always be determined by content inside it. If you impose a height limit on your division, increased content or text size will fail, causing content to be hidden. If required to display a background-image, use the min-height property.
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Also, APDivs cannot be centered as they are removed from the normal page flow. You might try wrapping an APDiv inside a relatively positioned parent container, but without seeing your page (entire code), it's impossible to say for sure if this will work for you.
See Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Center text in DIV horizontally and vertically.

I made a simple nav bar at the bottom of a site I am building and had it centered horizontally and vertically. When I pulled up the page today the text is all the way to the left and I had no problems with it the day before. I have made no changes to the code. I am using IE9, but I have been since I started this site. Everything seems fine in Firefox. If I turn IE9 to compatibility mode it centers horizontally but not vertically. Any ideas?
http://www.toddsshowcase.com/
http://www.toddsshowcase.com/styles/stylesheet.css

So...instead of this
<div id="containerBottom" style="height:110px; width:947px;">
<div id="idTable"><a href="index.html">HOME</a> | <a href="index.html">ABOUT ME</a> | <a href="index.html">MLS</a> | <a href="index.html">LISTINGS</a> | <a href="index.html">CALCULATOR</a> | <a href="index.html">CONTACT</a></div>
</div>
This?
<div id="containerBottom" style="height:110px; width:947px;">
<div id="idTable">
<div><a href="index.html">HOME</a> | <a href="index.html">ABOUT ME</a> | <a href="index.html">MLS</a> | <a href="index.html">LISTINGS</a> | <a href="index.html">CALCULATOR</a> | <a href="index.html">CONTACT</a></div>
</div>
</div>

Centering a horizontal list menu

I know this has been talked about but for the life of me
can't find the
answer. In a basic, simple, horizontal unordered list menu,
how can I center
the menu in a table cell? It loves to live on the left, dang
it!
I don't have a page to show since the client's looking at a
sample page so I
faked the menu spacing, but I'd like to do it correctly.
Here's the basic
code (per one of Murray's posts in case it looks familiar):
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul
#menu ul {
margin: 0; padding: 0;
#menu li {
margin: 0;
padding: 0 10px 0 10px;
list-style: none;
float:left;
Thanks!
Mad Dog

Thanks! The other thing is needed is to get rid of that silly
ole
float:left.
MD
P@tty Ayers ~ACE wrote:
> I changed this:
>
> #menu ul {
> margin: 0;
> padding: 0;
> }
>
> ...to this:
>
> #menu ul {
> margin: 0 auto;
> padding: 0;
> }
>
> ...and it centered the menu in the table cell for me.
I'm not sure
> what you have #menu applied to - I applied it to a div
which I
> wrapped around the <ul>, all inside a table cell.
>
> Hope that might help,
>
>
> --
> Patty Ayers | Adobe Community Expert
> www.WebDevBiz.com
> Free Articles on the Business of Web Development
> Web Design Contract, Estimate Request Form, Estimate
Worksheet
>
> "Mad Dog" <[email protected]> wrote in message
> news:etp2a8$6d0$[email protected]..
>> I know this has been talked about but for the life
of me can't find
>> the answer. In a basic, simple, horizontal unordered
list menu, how
>> can I center the menu in a table cell? It loves to
live on the left,
>> dang it! I don't have a page to show since the
client's looking at a
>> sample
>> page so I faked the menu spacing, but I'd like to do
it correctly.
>> Here's the basic code (per one of Murray's posts in
case it looks
>> familiar): <ul>
>> <li>One</li>
>> <li>Two</li>
>> <li>Three</li>
>> <li>Four</li>
>> <li>Five</li>
>> </ul
>>
>> #menu ul {
>> margin: 0; padding: 0;
>>
>> }
>>
>>
>> #menu li {
>> margin: 0;
>> padding: 0 10px 0 10px;
>> list-style: none;
>> float:left;
>>
>> }
>>
>>
>> Thanks!
>> Mad Dog

Need help centering DIV in CSS

Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.

This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Centering a horizontal Spry Menu

I am extremely new to DW and have been trying for hours to center a Spry Menu that I created and I can not figure it out. I've watched a dozen tutorials, have books, and have tried Googling but can not find my answer. Basically, I would like my menu bar to expand & contract with the users browser window. I'd like 15% on the left & right margins, 70% in the middle. The Spry menu (nav bar text) should be centered in the middle 70%. I feel I've tried everything. Any help would be greatly appreciated! Oh, & I am a designer, not a coder so be gentle with code explanations please.

Here is my code:
<!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>template</title>



<link href="../styles.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">About Us</a>
      <ul>
        <li><a href="#">What We Do</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Board</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Activities</a>
      <ul>
        <li><a href="#">Main Coffee</a>        </li>
        <li><a href="#">Drop-In Coffee</a></li>
        <li><a href="#">Neighbor to Neighbor</a></li>
        <li><a href="#">Special Activites</a></li>
        <li><a href="#">Community Services</a></li>
        <li><a href="#">Subgroups</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Membership</a>
      <ul>
        <li><a href="#">Cost</a></li>
        <li><a href="#">Benefits</a></li>
      </ul>
    </li>
    <li><a href="#">Photo Gallery</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Useful Links</a>
      <ul>
        <li><a href="#">General Information</a></li>
        <li><a href="#">Friends of Benvenuto</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Centering div makes design view too wide

<div style="width: 100%;">
<div style="width: 100px; margin-left: auto;
margin-right: auto;">
BODY CONTENT
</div>
</div>
Ok, I've been wrapping my body content in the div tags shown
above rather
than using a centred table as I did before. The problem I
have is that
design view is too wide and I have to use the horizontal
scroll bars when I
am using my laptop. It's not a big problem, but was wondering
if it was
necessary to have to live with this? Also, is there any
particular reason
the div appears yellow in design view?
Cheers
ss.

> an HTML retard
This is the most important thing for you to work on if you
want to stick
with DW.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Synapse Syndrome"
<[email protected]> wrote in message
news:[email protected]...
>
> "Gary White" <[email protected]> wrote in
message
> news:[email protected]...
>> On Sat, 13 May 2006 15:45:12 +0100, "Synapse
Syndrome"
>> <[email protected]> wrote:
>>
>>><div style="width: 100%;">
>>> <div style="width: 100px; margin-left: auto;
margin-right: auto;">
>>> BODY CONTENT
>>> </div>
>>></div>
>>>
>>>
>>>
>>>Ok, I've been wrapping my body content in the div
tags shown above rather
>>>than using a centred table as I did before. The
problem I have is that
>>>design view is too wide and I have to use the
horizontal scroll bars when
>>>I
>>>am using my laptop. It's not a big problem, but
was wondering if it was
>>>necessary to have to live with this? Also, is
there any particular
>>>reason
>>>the div appears yellow in design view?
>>
>> What's the point of the outer 100% wide div? You get
exactly the same
>> thing without it. Your body content is only 100
pixels wide? There is no
>> reason for the posted code to show up in yellow.
Perhaps, if you show
>> *all* of the code, someone can spot the problem.
>
>
> Thanks, from what you say it seems obvious now. I got
that code from an
> earlier post here and was using it without knowing what
I was doing 'cos
> I'm an HTML retard.
http://tinyurl.com/rd6zq
> I changed the 100px to the max width of the real
contents and now
> everything is fine. I don't know what the point of the
outer div was for
> in the example, but it does make the design view look a
bit better for
> working out my layout I think.
> Cheers
>
> ss.
>

Help centering divs

Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Thanks, Phyllis

Can't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Expand a centered div's width incrementally

I have a gallery in which I want to to expand to the width of the screen doing "auto width", but then add as many thumbnails across as possible. Then center that main gallery div so it's in the middle of the screen.
Keep in mind the number of images being displayed across each row is dynamically controlled by the width of the users screen. Below is the html I have so far.
Thanks
Here is the result I have right now.
I want this though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@charset "utf-8";
/* HTML5 RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
          display: block;
body {
          line-height: 1;
ol, ul {
          list-style: none;
blockquote, q {
          quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
          content: '';
          content: none;
table {
          border-collapse: collapse;
          border-spacing: 0;
#wrapper {
          height: auto;
          width: auto;
          background-color: #0CC;
#gallery {
          height: auto;
          background-color: #09C;
          margin-right: auto;
          margin-left: auto;
          padding-right: 20px;
          padding-left: 20px;
          width: auto;
          overflow: auto;
.clearboth {
          clear: both;
          height: 0px;
          width: auto;
.itempreview {
          height: 300px;
          width: 300px;
          background-color: #3FF;
          float: left;
          margin-right: 10px;
          margin-bottom: 20px;
          margin-left: 10px;
</style>
</head>
<body>
<div id="wrapper">
<div id="gallery">
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
<div class="itempreview"> </div>
<div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
          </div>
</div>
</body>
</html>

I wasn't sure if there was a way to incrementally adjust the width of that wrapper div so it would then always be centered.
To do so it would take an equation. One which would take the total width of the viewport and divided it by "320px" which each div is 300 and then the additional 20px for the padding on each side. Then it would round down to the nearest whole number. Then making the div wide enough to fit that "number of divs" and then centering the wrapper div in the viewport.
Example:
screen size = 1800 x 1200px
thumbnail/div size = 300 x 300px
-equation for seeing how many divs can fit width wise on the screen (screen width / thumbnail size)
1800 / 300 = 5.625
round 5.625 to the nearest whole number which eaquals 5.
so then there will be 5 thumbnails displayed in each row. Then center that wrapper div.
I don't know how to write js or else I'd write up an equation.
Is something like that possibe? And then have it update is the user changes there viewport size.

CSS issues - centering divs, floats, & margins

OK,
Have my CSS with wrapper....several different divs. My issue
was centering a div, then centering a div below it, so I used
margin-left:auto and margin-right:auto. I also have another div
that SHOULD reside on the right side of the page, however, it has a
float:right, so I know that the auto margins will push the right
floated div below where I want it to reside.
Here's the CSS code:
html,body {
margin-left: 0px;
margin-right: 0px;
background:;
#wrapper {
font-family:Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-style: normal;
line-height: normal;
color: #000000;
height: px;
width: 760px;
left:50%;
top:75px;
margin:0 auto 0 auto;
#toprule {
float:left;
width: 725px;
padding-left:15.5px;
padding-right:15.5px;
height: 6px;
border:#00000;
border-style:solid;
background:none;
#leftrule {
float:left;
width: 6px;
height: 600px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
margin-top: 75px;
#topbanner
width: 686px;
height: 136px;
margin-left:auto;
margin-right:auto;
margin-top:25px;
border:#000000;
border-style:solid;
border-size:1px;
background:#000000;
#rightrule
float:right;
width: 6px;
height: 600px;
margin-top:75px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#topmenu
width: 623px;
height: 26px;
margin-left:auto;
margin-right:auto;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#lowermenu
float:left;
width: 325px;
height: 124px;
margin-top:30px;
margin-left:40px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#images
float:right;
width: 306px;
height: 306px;
border:#000000;
margin-top:30px;
margin-right:30px;
border-style:solid;
border-size:1px;
background: none;
#content
float:left;
width:325px;
height:177px;
margin-left:40px;
margin-top:15px;
border:#000000;
borderstyle:solid;
border-size:1px;
background:none
#footer
width: 686px;
height: 73px;
border:#000000;
margin-top:15px;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-size:1px;
background:none;
and the HTML code
<!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>Welcome to EB's Food</title>
<link href="ebsfoods.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="wrapper">
<div id="toprule"></div>
</div>
<div id="leftrule">leftrule</div>
<div id="topbanner">topbanner</div>
<div id="rightrule">rightrule</div>
<div id="topmenu">
<div align="left">topmenu</div>
</div>
<div id="lowermenu">lowermenu</div>
<div id="images">images</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
Assistance greatly appreciated.......
David Bird
BTW,
The "lowermenu" and "content" are supposed to line up with
the left edge of the "topbanner" and the "images" is supposed to
line up with the right edge of the "topbanner". The footer is the
same size as the topbanner and is supposed to be centered.
db

This is a bit confused, as is your CSS. What is it you are
trying to
accomplish?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"mobirdman" <[email protected]> wrote in
message
news:[email protected]...
> OK,
> Have my CSS with wrapper....several different divs. My
issue was centering
> a
> div, then centering a div below it, so I used
margin-left:auto and
> margin-right:auto. I also have another div that SHOULD
reside on the right
> side
> of the page, however, it has a float:right, so I know
that the auto
> margins
> will push the right floated div below where I want it to
reside.
>
> Here's the CSS code:
>
> html,body {
>
> margin-left: 0px;
> margin-right: 0px;
> background:;
> }
>
> #wrapper {
> font-family:Georgia, Times New Roman, Times, serif;
> font-size: 14px;
> font-style: normal;
> line-height: normal;
> color: #000000;
> height: px;
> width: 760px;
> left:50%;
> top:75px;
> margin:0 auto 0 auto;
>
> }
>
> #toprule {
> float:left;
> width: 725px;
> padding-left:15.5px;
> padding-right:15.5px;
> height: 6px;
> border:#00000;
> border-style:solid;
> background:none;
> }
>
> #leftrule {
> float:left;
> width: 6px;
> height: 600px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> margin-top: 75px;
> }
>
> #topbanner
> {
>
> width: 686px;
> height: 136px;
> margin-left:auto;
> margin-right:auto;
> margin-top:25px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:#000000;
>
>
> }
>
> #rightrule
> {
> float:right;
> width: 6px;
> height: 600px;
> margin-top:75px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #topmenu
> {
>
> width: 623px;
> height: 26px;
> margin-left:auto;
> margin-right:auto;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #lowermenu
> {
> float:left;
> width: 325px;
> height: 124px;
> margin-top:30px;
> margin-left:40px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #images
> {
> float:right;
> width: 306px;
> height: 306px;
> border:#000000;
> margin-top:30px;
> margin-right:30px;
> border-style:solid;
> border-size:1px;
> background: none;
> }
>
> #content
> {
> float:left;
> width:325px;
> height:177px;
> margin-left:40px;
> margin-top:15px;
> border:#000000;
> borderstyle:solid;
> border-size:1px;
> background:none
> }
>
> #footer
>
> {
>
> width: 686px;
> height: 73px;
> border:#000000;
> margin-top:15px;
> margin-left:auto;
> margin-right:auto;
> border-style:solid;
> border-size:1px;
> background:none;
>
> and the HTML code
>
> <!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>Welcome to EB's Food</title>
> <link href="ebsfoods.css" rel="stylesheet"
type="text/css" />
> </head>
>
> <body>
> <div id="wrapper">
> <div id="toprule"></div>
>
> </div>
> <div id="leftrule">leftrule</div>
> <div id="topbanner">topbanner</div>
> <div id="rightrule">rightrule</div>
> <div id="topmenu">
> <div align="left">topmenu</div>
> </div>
> <div id="lowermenu">lowermenu</div>
> <div id="images">images</div>
> <div id="content">content</div>
> <div id="footer">footer</div>
> </body>
> </html>
>
> Assistance greatly appreciated.......
>
> David Bird
>

AP a Div inside a centered DIV

I've never got this understood. I have a Container DIV, set
to auto center. I'm using one of the presets that DW8 gives you. I
need put a small DIV in the upper right corner, that stays in the
exact spot even when browsers are widened...let me re-phrase. I
want the little DIV to be Absolutely Positioned, but using the XY
coordinates of my main, centered container.
I made a DIV, called it Absolute, moved it where I want it,
and of course it stays put when I widen the browser window. It is
using the whole browser window for the XY coordinates. That's fine,
and I understand it's supposed to work that way.
But, I also thought that if you put a DIV inside another, it
will use the XY of that div, not the whole page.
How do I do this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I've never got this understood. I have a Container DIV,
set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put
a small DIV in the
> upper right corner, that stays in the exact spot even
when browsers are
> widened...let me re-phrase. I want the little DIV to be
Absolutely
> Positioned,
> but using the XY coordinates of my main, centered
container.
>
> I made a DIV, called it Absolute, moved it where I want
it, and of course
> it
> stays put when I widen the browser window. It is using
the whole browser
> window
> for the XY coordinates. That's fine, and I understand
it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside
another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
>

Centering divs horizontally

Similar Messages

Maybe you are looking for