Let me start off by saying that I'm not a code guy. I just bought a new blog theme for my site www.convertingcopy.com (so you can see what I want) and I want to change the post look from the 2 columns on the main page to just 1, you'll see what I'm talking about at the site.

The designer behind the theme won't get into how to fix it but mentioned that changes need to be made starting at this point in the code which I've pasted below... I changed the widths from 276 to 560 so that when I just have one column it'll be the appropriate width and I changed the images associated with those parts, as well. I was hoping by increasing the width I would also force out the right column altogether so that it would just be one per row but as you can see, it's still two. Here's the code, maybe there's somewhere else in the code that I need to fix, but can anyone set me straight as to what to change or do?:

#content div#posts .post {
margin-right:11px;
background:url(images/post_bg.gif) repeat-y;
width:560px;
float:left;
margin-bottom:11px
}

#content div#posts .post.right {
margin-right:0
}

#content div#posts .post .categorie,#content div#posts.teal .post .categorie {
background:url(images/post_top.png);
height:33px;
width:560px;
color:#fff;
line-height:33px
}

maybe this isn't the best solution, but adding

position:relative !important;
left:0 !important;
top:0 !important;

to #content div#posts .post, so it will look like:

#content div#posts .post {
margin-right:11px;
background:url(images/post_bg.gif) repeat-y;
width:560px;
float:left;
margin-bottom:11px;
position:relative !important;
left:0 !important;
top:0 !important;
}

fixes yours problem

propeties setting your posts in the "wrong" way seems to be hard-coded to the theme

Never, never, never hack away with !important - because it IS a hack, used when somoene doesn't understand the cascade or specificity of CSS.

So, you want to have just a single column, how wide do you want it to be? Do you want it to be just 560px wide?

In looking at what's in there, the reason posts are still pushing out to the right is because the author used position:absolute and other properties to put those posts out to the right. So, it's going to take more work than just changing widths.

Here is the code for the main page, I'm pretty sure it's in here that I need to change but I don't know where the specific code which I need to take out is, can anyone point it out for me?:

<?php get_header(); ?>
<div id="content_container">
<div id="content_container_bg">
<div id="content">
<?php
//begin featured posts slider
if (function_exists('get_featured_posts')) {
?>
<div id="featured_posts" class="<?php echo get_option('fh_featured_color'); ?>">
<div id="slider">
<?php
get_featured_posts();
$arrfeatposts = get_featured_posts_id();
?>
</div>
</div>
<?php }
// end featured posts slider ?>
<div id="posts" class="<?php echo get_option('fh_posts_color'); ?>">
<?php
$odd_or_even = 'left';
query_posts(array('post__not_in' => $arrfeatposts));
?>
<?php if (have_posts ()) : ?>
<?php while (have_posts ()) : the_post(); ?>
<div <?php post_class($odd_or_even) ?> id="post-<?php the_ID(); ?>">
<?php $odd_or_even = ('left' == $odd_or_even) ? 'right' : 'left'; ?>
<div class="categorie">
<h3>
<?php
$categories = "";
foreach ((get_the_category()) as $category) {
$categories .= $category->cat_name . ", ";
}
$categories = substr($categories, 0, strlen($categories) - 2);
echo trimText($categories, 36);
?>
</h3>
<div class="icons"><a class="hide"><span class="hidden">hide</span></a></div>
</div>
<div class="min">
<div class="text">
<?php
if (has_post_thumbnail ()) {
?>
<div class="thumb_cont">
<a href="<?php the_permalink() ?>" class="thumb">
<?php
the_post_thumbnail();
?> <span class="hidden">&nbsp;</span>
</a>
<a class="comments_balloon" href="<?php the_permalink() ?>#comments"><?php comments_number('0', '1', '%') ?></a> </div>
<?php } ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo trimText(the_title('', '', FALSE), 23); ?></a></h2>
<p><?php echo trimText(get_the_excerpt(), 160); ?></p>
</div>
</div>
<div class="more"><a href="<?php the_permalink() ?>">View More</a></div>
</div>
<?php endwhile;
else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
<a class="btnAllposts" href="<?php
echo get_pagelink_by_title('all posts');
?>">view more</a>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Post this issue in hundred of forums (I already had pointed you to the right direction in DP) and the conclusion is remove position:absolute inline style from the posts is more suggested.

!important; hack not good idea.

<div <?php post_class($odd_or_even) ?> id="post-<?php the_ID(); ?>">
                    <?php $odd_or_even = ('left' == $odd_or_even) ? 'right' : 'left'; ?>

You see above div for each post gets an "position:absolute" when it genrate the source however which is not mentioned in the above code.

Infact, determining odd or even will not be necessery, coz you are not gonna align left or right as per odd or even. you can try playing with the above code though.

what if you remove

<?php $odd_or_even = ('left' == $odd_or_even) ? 'right' : 'left'; ?> from the above code?

There must be another file which add that property, may be check the function.php or any other file which create the posts on home page.

btw, why not hire a WP guy, who can fix this easily or pay the guy who you purchased the theme ?