Confused about changing code in WordPress PHP and CSS pages

You’ll need to wrap all those posts in a containing div, give that div an appropriate width (so that it can fit next to the sidebar) and float it left.

I have read through your post, ralph and I got fairly far. However, now I am stuck trying to get the posts to the left and the sidebar to the right. I have used the default template to build my template. Could someone look at my CSS code to see where I need to correct things? The blog is at http://foxdenwebsolutions.com/blog/.

Here is the CSS code -


/*
Theme Name: Foxden
Theme URI: http://wordpress.org/
Description: A WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.0
Author: Cori Foxworthy
Author URI: http://foxdenwebsolutions.com/
Tags: custom header, fixed width, two columns, widgets

	Foxden v 1.0
	 http://binarybonsai.com/kubrick/

	This theme was designed and built by Cori Foxworthy,
	whose blog you will find at http://foxdenwebsolutions.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/



* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #6b5845;
}
p {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 16px;
	color: #fff;
	margin-left: 20px;
	margin-right: 10px;
}
h1 {
	font-size: 20px;
	background-image: url(images/logo1.png);
	background-repeat: no-repeat;
	height: 222px;
	width: 179px;
	position: relative;
	left: 20px;
	top: px;
	text-indent: -9999px;
}
h2 {
	font-size:18px;
	color: #fff;
	font-family: Tahoma, "Trebuchet MS";
	text-align: center;
}
h3 {
	font-size:17px;
	color: #fff;
	font-family: Tahoma, "Trebuchet MS";
	text-align: center;
}
#main_container {
	background-image: url(images/main_bg.jpg);
	background-repeat: repeat-y;
	width: 1024px;
	margin: auto;
}
#blog_container {
	background-image: url(images/blog_bg.jpg);
	background-repeat: repeat-y;
	width: 1024px;
	margin: auto;
}

#menu_container {
	height: 39px;
	margin: auto;
	width: 1024px;
}
/* Sprite Setup */ 

ul#menu {
	list-style: none;
	margin: 0 auto;
	width:1024px;
	height: 39px;
}
ul#menu li a {
	float: left;
	height: 39px;
	text-indent: -9999px;
}
/* *    Normal Links */ 
ul#menu li#menuHome a {
	width: 110px;
	background:url(images/sprite.png) no-repeat 0px 0px;
}
ul#menu li#menuHistory a {
	width: 119px;
	background:url(images/sprite.png) no-repeat -110px 0px;
}
ul#menu li#menuHelp a {
	width: 257px;
	background:url(images/sprite.png) no-repeat -229px 0px;
}
ul#menu li#menuPrice a {
	width: 198px;
	background:url(images/sprite.png) no-repeat -486px 0px;
}
ul#menu li#menuPortfolio a {
	width: 120px;
	background:url(images/sprite.png) no-repeat -684px 0px;
}
ul#menu li#menuContact a {
	width: 120px;
	background:url(images/sprite.png) no-repeat -804px 0px;
}
ul#menu li#menuBlog a {
	width: 100px;
	background:url(images/sprite.png) no-repeat -924px 0px;
}
/* *    Hover Links */ 
ul#menu li#menuHome a:hover {
	background-position: 0 -38px;
}
ul#menu li#menuHistory a:hover {
	background-position: -110px -38px;
}
ul#menu li#menuHelp a:hover {
	background-position: -229px -38px;
}
ul#menu li#menuPrice a:hover {
	background-position: -486px -38px;
}
ul#menu li#menuPortfolio a:hover {
	background-position: -684px -38px;
}
ul#menu li#menuContact a:hover {
	background-position: -804px -38px;
}
ul#menu li#menuBlog a:hover {
	background-position: -924px -38px;
}
/* *    Clicked Links */ 
ul#menu li#menuHome a:active {
	background-position: 0 -76px;
}
ul#menu li#menuHistory a:active {
	background-position: -110px -76px;
}
ul#menu li#menuHelp a:active {
	background-position: -229px -76px;
}
ul#menu li#menuPrice a:active {
	background-position: -486px -76px;
}
ul#menu li#menuPortfolio a:active {
	background-position: -684px -76px;
}
ul#menu li#, menuContact a:active {
 background-position: -804px -76px;
}
ul#menu li#menuBlog a:active {
	background-position: -924px -76px;
}
/**  End Sprite Menu*/


#header_container {
	margin: auto;
}
#content_top {
	background-image:url(images/content_top.png);
	width: 870px;
	height: 75px;
	margin-left: 75px;
	margin-top: -90px;
}
#content_mdl {
	background-image:url(images/content_mdl.png);
	width: 870px;
	margin-left: 75px;
	overflow: hidden;
}
#content_btm {
	background-image:url(images/content_btm.png);
	width: 870px;
	height: 25px;
	margin-left: 75px;
	margin-bottom: 75px;
}
.form {
	text-align: center;
	font-family: Tahoma, "Trebuchet MS";
	font-size: 20px;
	color: #FFF;
	text-decoration: none;
}
input {
	background-color:#fff;
	border:1px #000 solid;
	font-family: Tahoma, "Trebuchet MS";
	font-size: 17px;
	color: #000;
}
#footer_container {
	clear: both;
	background:url(images/footer_bg.jpg) repeat-x;
	height: 100px;
	margin: auto;
}
#footer {
	clear: both;
	height: 222px;
	width: 1024px;
	margin: auto;
	background-image: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
}
#footer_nav {
	float: right;
	padding-right: 30px;
	text-decoration: none;
	margin-top: -30px;
	font-family: Tahoma, "Trebuchet MS";
}
#footer_nav li {
	font-size: 12px;
	display: inline;
}
#footer_nav ul li a {
	color: #fff;
	text-decoration: none;
}
#footer_nav ul li a:hover {
	color: #cd9767;
	text-decoration: none;
}
#footenav ul li a:active {
	color: #cd9767;
	text-decoration: none;
}
#footer p {
	padding: 18px;
	font-family: Tahoma, "Trebuchet MS";
	padding-left: 40px;
	color: #C0BDAC;
	font-size: small;
}
#footer li {
	color: #C0BDAC;
}
/* Begin Typography & Colors */

.widecolumn .entry p {
	font-size: 1.05em;
}
.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
}
.widecolumn {
	line-height: 1.6em;
}
.narrowcolumn .postmetadata {
	text-align: center;
}
.thread-alt {
	background-color: #f8f8f8;
}
.thread-even {
	background-color: white;
}
.depth-1 {
	border: 1px solid #ddd;
}
.even, .alt {
	border-left: 1px solid #ddd;
}
small {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 0.9em;
	line-height: 1.5em;
}
h2.pagetitle {
	font-size: 1.6em;
}
#sidebar h2 {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 1.2em;
}
.entry p a:visited {
	color: #b85b5a;
}
.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
}
.sticky h2 {
	padding-top: 10px;
}
.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em Tahoma, "Trebuchet MS";
}
.commentlist li ul li {
	font-size: 1em;
}
.commentlist li {
	font-weight: bold;
}
.commentlist li .avatar {
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
}
.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
}
.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
}
#commentform p {
	font-family: Tahoma, "Trebuchet MS";
}
.commentmetadata {
	font-weight: normal;
}
#sidebar {
	font: 1em Tahoma, "Trebuchet MS";
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #fff;
	margin-left: 45px;
}
code {
	font: 1.1em 'Courier New', Courier, Fixed;
}
acronym, abbr, span.caps {
	font-size: 0.9em;
	letter-spacing: .07em;
}
a, h2 a:hover, h3 a:hover {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #FFF;
	text-decoration: underline;
}
#wp-calendar #prev a, #wp-calendar #next a {
	font-size: 9pt;
}
#wp-calendar a {
	text-decoration: none;
}
#wp-calendar caption {
	font: bold 1.3em Tahoma, "Trebuchet MS";
	text-align: center;
}
#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}
/* End Typography & Colors */
/* Begin Structure */

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 450px;
}
.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
}
.post {
	margin: 40px 0 40px;
	text-align: justify;
}
.post hr {
	display: block;
}
.widecolumn .post {
	margin: 0;
}
.narrowcolumn .postmetadata {
	padding-top: 5px;
}
.widecolumn .postmetadata {
	margin: 30px 0;
}
.widecolumn .smallattachment {
	text-align: center;
	float: left;
	width: 128px;
	margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}
.postmetadata {
	clear: both;
}
.clear {
	clear: both;
}
/* End Structure */



/*	Begin Headers */

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}
#sidebar h2 {
	margin: 0;
	padding: 0;
}
h3 {
	padding: 0;
	margin: 30px 0 0;
}
h3.comments {
	padding: 0;
	margin: 40px auto 20px;
}
/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100&#37;;
	margin-left: 10px;
}
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
/* End Images */



/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
}
html>body .entry li {
	margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
	content: "\\00BB \\0020";
}
.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
}
.entry ol li {
	margin: 0;
	padding: 0;
}
.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
	list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
}
/* End Entry Lists */



/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
}
#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
}
#sidebar #searchsubmit {
	padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
}
select {
	width: 130px;
}
#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}
#commentform {
	margin: 5px 10px 0 0;
}
#commentform textarea {
	width: 100%;
	padding: 2px;
}
#respond:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
}
.commentlist {
	padding: 0;
	text-align: justify;
}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;
}
.commentlist li ul li {
	margin-right: -5px;
	margin-left: 10px;
}
.commentlist p {
	margin: 10px 5px 10px 0;
}
.children {
	padding: 0;
}
#commentform p {
	margin: 5px 0;
}
.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}
.commentmetadata {
	margin: 0;
	display: block;
}
/* End Comments */



/* Begin Sidebar */
#sidebar {
	padding: 0 10px 10px 0;
	width: 300px;
	float: right;
}
#sidebar form {
	margin: 0;
}
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
}
#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}
#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}
#wp-calendar a {
	display: block;
}
#wp-calendar caption {
	text-align: center;
	width: 100%;
}
#wp-calendar td {
	padding: 3px 0;
	text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff;
}
/* End Calendar */



/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
}
acronym, abbr {
	border-bottom: 1px dashed #999;
}
blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}
blockquote cite {
	margin: 5px 0 0;
	display: block;
}
.center {
	text-align: center;
}
.hidden {
	display: none;
}
.screen-reader-text {
	position: absolute;
	left: -1000em;
}
hr {
	display: none;
}
a img {
	border: none;
}
.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
}
/* End Various Tags & Classes*/



/* Captions */
.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

Let me know if there is anything else anyone needs from me to help. I just also realized that the default theme is 3 columns. I only want 2 columns…I think.

No doubt about that! Keep plugging away. :wink:

DOH! No my fault…I told you I was tired :wink: Now it works and looks much better.

Next will be figure out the other pages involved, such as the posts page because the look is broken!

That will have to come tomorrow. Maybe I can get good at this and add the knowledge to my repertoire!

Hi cgacfox

There is lots that could be said here, but I recorded my experiences with this issue a while ago here, which might be worth reading. See if that answers any of your questions, and then post back with what you find.

Not dumb questions at all. This is not easy stuff! And I’m not very experienced at it either. I just stumble along.

In my install, I essentially have this at the very end of the header.php file:

<div id="content">

then in the index.php file I have

<?php
get_header();
?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
	
	<div class="storycontent">
		<?php the_content(__('<strong>Read more</strong>')); ?>
	</div>
            
</div> <!-- end post div -->

</div> <!-- end content div -->

.
.
.

<div id="sidebar">

<?php get_sidebar(); ?> 

</div> <!-- end sidebar div -->
.
.
.

That’s stripped down a bit, but gives the basic idea. So I wrap all of the posts in a div called Content, which is floated left.

See if that helps, but feel free to ask more. (To be honest, I don’t use WP any more, so I’m getting rusty… not that I ever knew much!)

I do have Firebug installed and removing the margin-right moves the entire content across the page. I might be tired after working on this all day but I am not sure how to fix this.

Ah, my fault. The problem is that you don’t have a width set on the Content div.

So give it a width of 390px (or thereabouts). Floating does nothing unless an element is less that 100% width, which it is by default.

#content {
  width: 390px;
}

Well done so far.

Just remove that big right margin on the Content box. No need for that at all, and it is blocking out the sidebar. Then you can remove the negative top margin on the sidebar. You are quite right to be displeased with it.

I recommend you download the Firebug plugin for Firefox. It allows you to inspeact all your elements, and you’d immediately see that the right margin on Content is getting in the way of the sidebar.

Well I got it to work but I had to use a negative margin and I don’t like doing that.

http://foxdenwebsolutions.com/blog/index.php


#sidebar {
	font-family: Tahoma, "Trebuchet MS";
	float: right;
	margin-right: 10px;
	margin-top: -555px;
}

Does anyone have suggestions on how I can fix this?