sidebar spacing

Use the following in site_blog.css

.post {
	float: left;
	margin: 5px;
	width: 740px;
}
.post .mid {
	width: 740px;
}

instead of:

.post{margin:5px;}

.post .mid{width:740px;float:left;}

and add this within the the last </div> before the footer is called:

<div class="clear"></div>

for example, it should look something like:

<div class="clear"></div>
</div><!-- ends content div -->
<?php get_footer(); ?>

awesome that it pulled it up… but it also made the page short and put the page nav in the sidebar. (Not sure if there is a way to solve that without me leaving it live…. ?? ) but here is a another photo of what it looked like –>

https://fondalashay.com/download/issue2.png

thanks for the help!! and if you know how to fix that let me know! i am still new to wordpress ??

THANKS!

Try taking the same steps again and also change

<div class="wp-pagenavi">

to:

<div class="wp-pagenavi clear">

if <div class="wp-pagenavi"> isn’t in your theme then add the following to your style.css

.wp-pagenavi {
clear: both;
}

ok thanks again.. i am so sorry to bother you more but i am learning now that there seem to be some big flaws in my theme.. lol.. so i understand if you want to stop helping ??

it all works great on the main page.. but when you open a single post the content container is very small and does not extend the length of the page.. i am obviously way out of my league here!

https://fondalashay.com/download/issue3.png

my theme did not originally have a sidebar.. so i had to add it.. and not knowing what i was doing ??

I’m definitely not a great xhtml/css coder and there are a ton of much better tutorials out there, but here how I attack these kinds of alignment issues:

The basic idea is create a container wrapper that will hold two or more <div>s side by side. You then float the <div>s together in whatever order you want. For example, a div with float:left; will go as far left as it can and a <div> with a float: right; will go as far to the right as it can.

After you have two floating <div>s you need to clear the float or everything will keep being push one way or the other. That is where <div class="clear"> is used. Float one <div> left, one <div> right and then clear. In the first example below, the <div id="blog-post-container"> is being floated next to <div id="sidebar"> and is then cleared by <div class="clear">. Note that each of the floated<div>s widths are important and should add up to be less than or equal to the<div id=”container”>(padding left or right also increases the width of the<div>`).

XHTML:

<div id="container>

	<div id="sidebar">
		<!-- some sidebar content goes here -->
	</div><!-- end #sidebar -->

	<div id="blog-post-container">
		<!-- some blog-post-container content goes here -->
	</div><!-- end #blog-post-container -->

	<div class="clear"></div><!-- end .clear -->

</div><!-- end #container -->

CSS:

#container {
	width: 980px;
	/* no float on this div */
	/* other css styles go here */
}
#sidebar {
	width: 240px;
	float: right;
	/* other css styles go here */
}
#blog-post-container {
	width: 740px;
	float: left;
	/* other css styles go here */
}
.clear {
	clear: both;
}

After you set up your <div>s and their floats you can then place non-floated content inside like below (like the WordPress Loop):

<div id="container>

	<div id="sidebar">
		<!-- some sidebar content goes here -->
	</div><!-- end #sidebar -->

	<div id="blog-post-container">
		<div id="post-1" class="post">
			<!-- some post-1 content goes here -->
		</div><!-- end #post-1 -->
		<div id="post-2" class="post">
			<!-- some post-2 content goes here -->
		</div><!-- end #post-2 -->
		<div id="post-3" class="post">
			<!-- some post-3 content goes here -->
		</div><!-- end #post-3 -->
	</div><!-- end #blog-post-container -->

	<div class="clear"></div><!-- end .clear -->

</div><!-- end #container -->