<div>s and <spans>s won't center.

[Young Twig]

Hmm... I'm making the website for my church: www.tccalbany.com

I gave up on the CSS layout because I was getting confused and wanted to actually understand my code... So, I used tables and got that set up right. Now, the problem is that the navigation isn't centered and the news isn't centered (in Gecko browsers). I tried setting the margins to auto in .sidebar and .content... What is wrong?

[Crowe]

Gak, I misread what you said. Nevermind my solution

[DaveMaxwell]

Playing in the css editor in mozilla, this is what I got to work. It looks like you've got some extra stuff in there you don't need to do. For example, the td classes have both been changed so they'll do what I think you're intending to do, which is provide the background for the data. For some reason, the code which was for the tds was in the sidebar and news/headers stuff.

Might I suggest using the sidebar code for the heading and the news since they're basically the same?

/* Type CSS rules here and they will be applied
to pages from 'editcss'
immediately as long as you keep this window open. */
/**** LINK-tag style sheet tcc.css ****/
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; }
.logotd { height: 109px; width: 99% }

/* dem - changed this */
.sidebartd { height: auto; vertical-align: top; width: 20%;
background-color: #ebe4e5;
background-image: url('/img/shad1.gif');
background-repeat: repeat-x;  }
 
/* dem - changed this */
.contenttd  
{
height: 100%;
vertical-align: top;
background-image: url('/img/shad1.gif');
background-repeat: repeat-x;  }
 }
.foottd { height: 31px; width: 99% }
body { font-family: sans-serif, Tahoma, Helvetica;
font-size: 11px;
text-align: center;
color: #000000;
background-color: #ffffff;
text-align: center }
.mainlayout {
width: 100%;
height: 100%;
border: 0px solid #000000;
}
.logo {
background-image: url('/img/tcclogobg.png');
background-repeat: repeat-x;
background-color: #591621;
text-align: left;
padding: 0px;
width: 100%;
border-bottom: 1px solid #000000;
height: 109px; }
a:link { color: #591621 }
a:active { color: #591621 }
a:visited { color: #591621 }
a:hover { text-decoration: none }
table {
font-family: sans-serif, Tahoma;
font-size: 11px; 
color: #000000 }
.sidebar a:link { font-family: sans-serif, Verdana;
font-size: 11px; 
height: 15px;
color: #000000;
text-decoration: none;
background-color: #ffffff;
display: block; 
width: 80%; 
padding: 1px;
border-top: solid 0px  #000000; 
border-bottom: solid 1px  #000000; 
border-left: solid 1px  #000000; 
border-right: solid 1px #000000; }
.sidebar a:visited { font-family: sans-serif, Verdana;
font-size: 11px; 
color: #000000;
text-decoration: none; 
background-color: #ffffff;
display: block; 
width: 80%; 
padding: 1px;
border-top: solid 0px  #000000; 
border-bottom: solid 1px  #000000; 
border-left: solid 1px  #000000; 
border-right: solid 1px #000000; }
.sidebar a:hover { font-family: sans-serif, Verdana;
font-size: 11px; 
color: #000000;
text-decoration: none; 
background-color: #ffffff; 
background-image: url('/img/arrow.gif');
background-repeat: no-repeat;
display: block; 
width: 80%; 
padding: 1px;
border-top: solid 0px  #000000; 
border-bottom: solid 1px  #000000; 
border-left: solid 1px  #000000; 
border-right: solid 1px #000000; }
.indent { margin-left: 20px; }
.blackborder { border: 1px solid #000000; }
/* dem - changed this */
.sidebar { 
width: 90%; 
vertical-align: top;
margin: 8px auto ;
text-align: center;
height: 100%; 
}
.sidecat { display: block; width: 80%; padding: 1px;
border: 1px solid #000000; 
color: #ffffff;
font-size: 11px;
background-image: url(/img/title.gif);
background-repeat: repeat-x;
background-color: #591621 }
/*
dem - commented this out since you didn't need it 
.content { width: 100%; 
padding-top: 7px; 
padding-bottom: 7px; 
text-align: center;
background-image: url('/img/shad2.gif');
background-color: #ffffff;
background-repeat: repeat-x; 
vertical-align: top;
}
*/
.header { 
width: 60%;
padding: 1px 2px;
margin: 5px auto 0px;
border: 1px solid #000000; 
color: #ffffff;
text-align: center;
background-image: url(/img/title.gif); }
.news { 
padding: 1px 2px;
margin: 0px auto;
width: 60%;
text-align: center;
border-top: solid 0px  #000000; 
border-bottom: solid 1px  #000000; 
border-left: solid 1px  #000000; 
border-right: solid 1px #000000; 
font-size: 11px; }
.foot {
width: 100%;
padding: 1px;
border-top: 1px solid #000000; 
color: #ffffff;
text-align: center;
background-image: url(/img/foot.gif);
background-repeat: repeat-x;
background-color: #591621 }

[Radar5756]

.news {
padding: 1px 2px;
margin: auto;
width: 60%;
text-align: center;
border-top: solid 0px #000000;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
font-size: 11px; }


Try margin: auto; It worked for me with my table design.

Bill

[earther]

Try margin: auto; It worked for me with my table design.
Bill

Even in IE 5.5?

[Young Twig]

.news {
padding: 1px 2px;
margin: auto;
width: 60%;
text-align: center;
border-top: solid 0px #000000;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
font-size: 11px; }


Try margin: auto; It worked for me with my table design.

Bill

Thanks, man. That worked. I had put the margin: auto on the wrong sections. I had put that in .content and .sidebar.