Centering Content

[angelazou]

I’m using a simple conditional to show sidebar only if the URL contains certain word. However, when the sidebar is gone, I want the content to be placed in the center. I’m using the following in my PHP. I originally thought margin: X auto; should do the trick, but it didn’t. I also tried to remove ‘float:left;’, but the content is still coming from the left side.

echo '';

Angela

[TheDoc]

Tough to say without looking at a live link.

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

[timmey]

dont know if its that what you mean:

http://jsfiddle.net/BLwgJ/196/

[noahgelman]

Wouldn’t it be easier to use the same conditional statement being used to add the sidebar to add a class to the content div you’re trying to center? That way you can just control the styles via stylesheet and you don’t have to echo echo out a style tag on the page.

[angelazou]

hi timmey, I know I’m asking to centering stuff, but I’m looking to center the “content” box, not the text in there. And for noahgelman, it would be a great habit to form (which is not something I have a lot), but that doesn’t really solve the issue I have right now.

Angela

[timmey]

well, both divs are centered, or i still dont get it :)

[angelazou]

oh, sorry I missed that. Guess small windows are bad things, sometimes. Thanks a lot.

Edit: Just tried to use ‘position: relative;’ instead of ‘float: left;’, didn’t work. Removing ‘float: left;’ didn’t work either. Bummer. But it wasn’t too much of a big deal. Guess I will just let it go.

Angela

[Author]

Posts