Can anyone help me out with this CSS / HTML stuff?

[Nesagwa]

http://www.radicalwaste.com/

www.radicalwaste.com/wp-content/themes/peaceful-rush/style.css

the bottom just wont line up. I have it inside the Post DIV as its own P with the .postinfo floating over that.

Ive moved it around all over the place, just cant figure out what the hell is making it stay over on the side like that.

Anyone see something Im missing here?

 

[bstoppel]

I have it inside the Post DIV as its own P with the .postinfo floating over that.

I'm pretty sure this is actually the issue. If you move the bottom of the DIV up to above the <p> it should resolve the issue. Of course you will also have to change the postinfo and postfoot classes so that they will still apply to the <p> most easliy by removing the ".entry" that is defined before them.

 

[Nesagwa]

That makes too much sense to even work.

 

[cannonball]

Here's how I fixed your problem:

Step 1: in your .css file, create a new div class as so:

.post_footer
{
	margin: 10px 0 0px;
	padding: 15px 30px 5px 30px;
	background: url(images/post-foot.png) no-repeat left;
}

step 2:

Here is an example of how your html code should look (using your first post):

<div class="maincolumn">
   <div class="post" id="post-13">
   <h2><a href="http://74.220.207.146/~radicalw/?p=13" rel="bookmark" title="Chapter 9">Chapter 9</a></h2>
   <div class="entry">
	 <p>This weekend I saw something.  It was something unexpected and Im almost certain we were the only ones to have seen it.  There, in Ybor city, was a chicken crossing the road.  19th street in particular.  A red rooster crossed the road and then crossed back.  It was almost struck by a passing car on the return trip, but came to no ill.</p>
         <p>Stardust was a grade A movie in my book.  Something worth the price of admission.  I wont go into much detail since its a very good movie and it would be better to go in without any preconceptions.  Good movies are best served cold.</p>
         <p>My back has been knotted up and in pain for the past week.  It seems to be feeling a little better, but there is still pain in the sides of my abdomen when I twist my back left and right.  Hopefully this all fixes iself soon.</p>
   </div>   
</div>
<div class="post_footer">
	<p class="postinfo">Filed on: September 3rd, 2007</p>
</div>

I tested it in the latest firefox and IE. Looked correct in both cases.

 

[Nesagwa]

Something didnt quite work out, its just not showing up correctly.

Working on it now, I suspect it might be a margin issue somewhere.

EDIT: Well I figured out I was typing something wrong (put footer instead of just foot)

Now to fix the margins.

EDIT2:

It still looks like the main post DIV is forcing the footer into its margins and making it too small.

EDIT3:

Moved some stuff around and its working. But now I cant get margins or padding to work on the postinfo. Not sure why.

 

[Nesagwa]

Figured it out

The p.postinfo was still a part of .entry instead of .post_foot so it wasnt taking any of the information I was putting in.

 

[cannonball]

Hey glad it worked!

 

[RAINBOW PONY]

lol, no wonder you dropped out of college.

 

[Nesagwa]

I know right?

 

[Nesagwa]

New problem

I added the footer to my Page Template (seperate from Main Index Template) and it bumps the sidebar down under the main column.

http://74.220.207.146/~radicalw/?page_id=5 example on the about page.

<?php get_header(); ?>




<div class="maincolumn">

	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">

		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<div class="entry">


			<?php the_content(); ?>
			<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>


		</div>
	</div>



<!--			<?php trackback_rdf(); ?> -->


<div class="post_foot">

</div>

	<?php endwhile; ?>




	<?php else : ?>


	<div class="post">


		<h2><?php _e('Not Found'); ?></h2>
		<div class="entry">
<p class="notfound"><?php _e('Sorry, but you are looking for something that isn't here.'); ?></p>
		</div>

	</div>

	<?php endif; ?>



<?php get_footer(); ?>

I cant really spot anything that would be pushing the thing over.

 

[smuf]

/*  
Theme Name: Peaceful Rush
Theme URI: http://www.wpdesigner.com/2007/01/17/peaceful-rush-wordpress-theme/
Description: Peaceful Rush Wordpress theme created by Small Potato (WPDesigner.com)
Version: 1.0.2
Author: Small Potato
Author URI: http://www.wpdesigner.com/

	This theme is released under GPL.

*/

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: monospace;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
        background: #996633;
	color: #000;
}

h1, h2, h3, h4, h5, h6{
	font-family: Georgia, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

a{
	text-decoration: none;
	color: #000;
}

a:hover{ text-decoration: none; }

a img{ border: 0; }

abbr, acronym{ border: 0; }

address, dl, p{ padding: 15px 0 0; }

blockquote{
	margin: 5px 0 0;
	color: #000;
}

blockquote p{ padding: 15px; }

blockquote blockquote{
	margin: 15px;
	background: #fff;
	color: #333;
}

code{
	background: #f9f9f9;
}

dt{ font-weight: bold; }

dd{ padding: 0 0 0 15px; }

hr{
	clear: both;
	margin: 15px 15px 5px 15px;
	border: 0;
	height: 1px;
	text-align: left;
	background: #ede5da;
	color: #ede5da;
}

small{
	font-size: 11px;
}

pre{
	width: 90%;
}

input, textarea{
	font-family: Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#s, input#author, input#email, input#url, textarea#comment{
	border: 1px solid #e5d8c6;
	background-color: #faf5ef;
	padding: 3px;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

#container{
	margin: 0 auto;
	width: 748px;
}

#header{
	clear: both;
}

#header h1{
	float: left;
	padding: 5px 30px 0px 75px;
	font-size: 24px;
	font-weight: normal;
	text-transform: capitalize;
	background: url(images/logo.gif) no-repeat 38px 5px;
	color: #fff;
}

#header h1 a{
	text-decoration: none;
	color: #fff;
}

#header h1 a:hover{
	text-decoration: none;
}

#menu{
	float: left;
	font-family: Georgia, sans-seriff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
}

#menu ul{
	list-style: none;
	margin: 0;
	padding: 15px 23px 0px 0px;
}

#menu ul li{
	display: inline;
	margin: 0;
	padding: 0 15px;
}

#menu ul li a{
	text-decoration: none;
	color: #fff;
}

#menu a:hover{
	text-decoration: none;
}

#pagewrapper{
	float: left;
	width: 748px;
	padding: 25px 0px 0px 0px;
        background-color: #FFFFFF;
}

#page{
	padding: 0 23px;
}

#banner{
	float: left;
	width: 702px;
	height: 50px;
	background: url(images/banner.png) no-repeat left top;
	clear: both;
}

.maincolumn{
	float: left;
	width:700px;
	
}

.post{
width: 390px;
float:right;
	margin: 10px 0 0px;
	padding: 10px 75px 0px 30px;
	background: url(images/bg_post.png) no-repeat left top;
	
}


.post h2{
	border-bottom: 1px solid #ebe1d3;
	padding: 0px 0px 7px 25px;
	font-size: 18px;
        font-family: monospace;
	font-weight: normal;
	color: #000000;	
}

.post h2 a{
	text-decoration: none;
	color: #000000;
}

.post h2 a:hover{
	text-decoration: none;
}


.entry{
	line-height: 24px;
        text-align: justify;
        vertical-align:top;
		float:right;


}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
	border: 0;
	padding: 10px 0 0;
}

.entry h1{
	font-size: 24px;
	font-weight: normal;
}

.entry h2{
	font-size: 18px;
	color: #000;
}

.entry h3{ color: #c97d05; }

.entry  h4{}

.entry h5{ font-weight: normal; }

.entry h6{ font-size: 11px; font-weight: normal; }

.entry img{
	border: 1px solid #e5d8c6;
	padding: 4px;
	background-color: #faf5ef;
}

.entry img.wp-smiley{
	padding: 0;
	border: 0;
	background-color: transparent;
}

.entry img.alignleft{
	float: left;
	margin: 5px 10px 0 0;
}

.entry img.alignright{
	float: right;
	margin: 5px 0 0 10px;
}

.post_foot p.postinfo{
        float: right;
	padding: 15px 30px 5px 30px;
        margin: 10px 0px 0px 0px;
	font-size: 12px;
	font-family: monospace;
	color: #000000;

}

.post_foot{
	width: 485px;
        height: 50px;
        margin: 0px 10px 0px 0px;
		float:right;
        padding: 0px 0px 0px 0px;
        background: url(images/post-foot.png) no-repeat bottom left;
}

.entry p.notfound{
	padding: 15px 0 100px;
}

.browse{
	margin: 0 0px;
	border-top: 1px solid #e5d8c6;

	line-height: 24px;
}

#sidebar{

	margin: 10px 0 0 10px;
        padding: 0px 0px 0px 0px;
	width: 160px;
	background: url(images/bg_sidebar.gif) no-repeat left top;
}

#sidebar a{
	color: #878773;
}

#sidebar ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidebar ul li{
	padding: 15px;
	font-family: Georgia, sans-seriff;
	text-transform: uppercase;
}

#sidebar ul li.syndicate a{
	padding: 0 20px 0 0;
	background: url(images/feed-icon.gif) no-repeat right 2px;
}

#sidebar ul li h2{
	border-bottom: 1px solid #ebe1d3;
	padding: 0 0 7px 0;
	font-size: 12px;
	color:  #514129;
}

#sidebar ul ul{
	padding: 7px 0 0;
}

#sidebar ul ul li{
	padding: 0;
	font-family: Arial, Helvetica, Georgia, sans-seriff;
	line-height: 24px;
	text-transform: none;
}

#sidebar ul ul ul{
	padding: 0;
}

#sidebar ul ul ul li{
	padding: 0 0 0 15px;
	background: url(images/bullet_2.gif) no-repeat 0 8px;
}

#sidebar ul ul ul ul li{
	background: url(images/bullet_3.gif) no-repeat 0 8px;
}

#sidebar ul ul ul ul ul li{
	background: none;
}


/* Comments Template */

#comments-template{
	border-top: 1px solid #e5d8c6;
	margin: 0px 15px;
	padding: 15px 0;
}

#comments-template p{
	line-height: 24px;
}

#comments-template p.nocomments{
	padding: 0 15px;
}

#comments-template h2, #comments-template h3{
	font-size: 14px;
	font-weight: bold;
	color: #74624b;
}

h3#comments, h3#respond{
	padding: 0 0 0 15px;
}

h3#respond{
	padding: 30px 0 0 15px;
}

#comments-template .commentmetadata{
	font-size: 11px;
}

#comments-template ol{
	list-style: none;
	margin: 0;
	padding: 0;
}

#comments-template ol li{
	border-bottom: 1px solid #e5d8c6;
	padding: 15px 0 15px;
}

/* End Comments Template */


/* wp-calendar */

table#wp-calendar{
	width: 100%;
	font-family: Arial, Helvetica, Georgia, Sans-Serif;
	text-transform: none;
}

table#wp-calendar caption{
	padding: 10px 15px;
}

table#wp-calendar th{
	font-weight: normal;
	text-align: right;
	vertical-align: top;
	background: #faf5ef;
}

table#wp-calendar td{
	padding: 1px;
	text-align: right;
}

table#wp-calendar tfoot td{
	text-align: center;
}

/* end calendar */

#container, #header, #menu, #pagewrapper, #page, #banner, .maincol, .post, .browse, #sidebar, #comments-template{
	text-align: left;
	vertical-align:top;
}

Try this CSS. Should work fine.
I changed some of the widths/floats.

edit: nevermind, noticed you managed to fix it yourself.

 

[Nesagwa]

I didnt fix anything

Is it showing up correctly on the about page?

It shows up right on the main index, but not on the single pages like About and stuff, which is werid.

 

[smuf]

I didnt fix anything

Is it showing up correctly on the about page?

It shows up right on the main index, but not on the single pages like About and stuff, which is werid.

Ah I just looked at your main page and thought it was fixed. Anyways, my version has the menu on the left, but you could probably fix that by switching the floats. Didn't test it properly, but it should work.