Re: Centering Content

[angelazou]

I probably can’t provide a live link, but here are all the CSS related to #primaryContent selector, which is designed to hold all the output for the main column.

#primaryContent {

clear:both;

float: left;

margin: 70px 40px 0 0;

padding: 0 15px;

width: 680px;

}

body.home #primaryContent {

clear:both;

float: left;

margin: 30px 0 0 0;

padding: 0 15px;

width: 960px;

}

#primaryContent h1,

#primaryContent h2 {

margin: 10px 0 0;

padding: 0;

}

body.page-id-2 h1.postTitle,

body.page-id-2 h2.postTitle,

body.home h1.postTitle a,

body.home h2.postTitle a {

display: none;

}

#primaryContent h1.postTitle,

#primaryContent h2.postTitle {

font-size: 22px;

margin: 0 0 20px;

padding:10px 0;

text-align:center;

}

#primaryContent h1.postTitle a,

#primaryContent h2.postTitle a {

background:#0097a5 url(images/title-bg.gif) repeat 0 0;

-moz-border-radius: 10px;

-o-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius:10px;

color:#fff;

font-size:24px;

font-weight:normal;

line-height:1.5em;

padding:10px 15px;

text-shadow:-1px -1px #333;

text-transform:uppercase;

}

#primaryContent h1.postTitle a:hover,

#primaryContent h2.postTitle a:hover,

#primaryContent .sticky h2.postTitle a:hover {

background:#CC4D22 url(images/title-bg-over.gif) repeat 0 0;

text-decoration: none;

}

#primaryContent h3 {

margin: 10px 0 0;

padding: 0;

}

#primaryContent p.date {

background: url("images/border.gif") repeat-x scroll left center transparent;

color:#666;

font-size: 14px;

margin:10px 0 20px;

text-align:center;

}

#primaryContent p.date small {

background:url("images/bg-paper.jpg") repeat scroll 0 0 transparent;

color:#666;

font-size:14px;

padding:0 10px;

}

#primaryContent .sticky h2.postTitle a {

background: url(images/title-bg-sticky.gif) repeat scroll 0 0 #910f0f;

}

#primaryContent .sticky p.date,

#primaryContent .sticky p.date small {

background:none;

}

#primaryContent .error-page h2 {

font: 3em/2em 'Lobster',Georgia,"Times New Roman",Times,serif;

text-align:center;

}

#primaryContent .error-page h2 span {

color:#CC4D22;

font-size:2.2em;

}



@media (max-width: 1024px) {

#canvas {

padding:40px;

width: auto;

}

#primaryContent {

width: 65%;

}

Most of these are pretty irrelevant except the first 2.