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 –>
http://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!
http://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 -->
