Forums

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 '<style>
#primaryContent {
	clear: both;
        float: left;
	margin: 30px auto;
	padding: 0 15px;
	width: 860px;
}</style>';

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

treehouse : what would you like to learn today?

Forums

Centering Content