[RESOLVED] Create two divs in content area and assign each a category

[griever]

rince I figured that part out! I changed some syntax and deleted a bit of unnecessary stuff. Here is the index.php for posterity:

<?php
get_header ();
?>
<div id="box">
     <div id="left">

 <?php $my_query = new WP_Query ( 'category_name=tony&showposts=3' );
 while ( $my_query->have_posts () ) :
    $my_query->the_post () ?>



    <div class="post">
    <h3>
    <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
    </h3>
        <div class="entry">
            <?php the_content ();?>
        </div><!-- end entry div -->    
    </div><!-- end post div -->    
<?php
endwhile;/*end tony while have posts*/

?>
    </div><!-- End Left Div -->





<div id="right">
<?php
$my_query = new WP_Query ( 'category_name=hippie&showposts=3' );
while ( $my_query->have_posts () ) :
    $my_query->the_post () ?>

    <div class="post">
    <h3>
    <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
    </h3>
        <div class="entry">
            <?php the_content ();?>
        </div><!-- end entry div -->

    </div><!-- end post div -->    
<?php
endwhile;/*end hippie while have posts*/

?>
    </div><!-- End Right Div -->
</div><!-- end box div -->
<?php
get_sidebar ();
get_footer ();
?> 

The last step is that I just can't get the divs to display side-by-side, even though I make their widths 40% of the box div that they are in. It doesn't even work if I give them a fixed width that is less than half of the box width. Here is the css:

/*  /*  

Theme Name: Duel
Theme URI: hippievstony.com
Description: Side-By-Side Comparison Blog Mayhem
Version: 1.0
Author: tony
Author URI: http://www.hippievstony.com

*/
*/

#left{
     float: left;
     width: 40%;
     }

#right{
     float: right;
     width: 40%;
     text-align: right;
     }


body{
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	background: #ffffff;
	color: #000000;
}

a:link, a:visited{
	text-decoration: underline;
	color: #336699;
}

a:hover{
	text-decoration: none;
}

#wrapper{
	margin: 0 auto 0 auto;
	width: 1200px;
	text-align: left;
}

#header{
	float: left;
	width: 1200px;
        height: 800px;
        background: url(http://www.hippievstony.com/wp-content/uploads/2009/10/hippievstonyadjpgsmall.jpg) no-repeat;
        padding-left:100px;
        }

#box{
	float: left;
	width: 1000px;
}



.sidebar{
	float: right;
	width: 200px;
	background: #eeeeee;
	margin: 0 0 0 0px;
	display: inline;
}

#footer{
	clear: both;
	margin: auto;
	width: 1200px;
        text-align: center;
}

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

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

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}

check the site out if you want to see what I mean

http://hippievstony.com

[rincewind456]

Ok to get the entries side by side put this

.post 	{
	width:40%;
	}

in your css file.

Also you need to look at the comments at the top of your css file you use

/*  */[code] to comment a css file whereas what your doing [code]/*/* */*/ [code is incorrect as the last [code] */[code] is [B]outside[/B] the comment area and is therefore parsed as css which causes the first css statement to fail. See [URL="http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.hippievstony.com%2F"]this[/URL] page. 

It's always a good idea to validate your html and css but especially when your getting errors in your layout.

[griever]

Thanks so much I got it pretty much where I want it! I feel like I have a super basic understanding of php and css now. I hope you don't mind I gave you a credit in my style.css comments for the template 🙂

So for anyone looking for wordpress blog with two authors side-by-side, try this zip file. It looks something like this

[griever]

hey rince i'm expanding the site to add another friend, I was trying to figure out a method to have the divs remain side-by-side instead of returning to the space below. Before I was floating my div left and floating hippie's div right, but what do you do if you want something in the middle too? there's no float center/middle 🙂

[rincewind456]

For that you would want to look at Glish.com, there is a 3 column fluid layout that's easy to implement, as well as a 3 column layout that's contained inside another div, much the same as your 2 column layout is now.

[griever]

hey rince did you get a chance to see the site? I got a few friends to start posting on there and was wondering what you thought of this idea. I was trying to think of a way to sort the divs so that the one with the newest post is displayed at the far left and the oldest at the far right end. You have an overall idea of how this could work? I thought this would be great since the site is all about pressuring people into staying productive and making things, it would be a battle to hold on to that left most spot.

[rincewind456]

Yes I've just looked at the site it looks good, the only thing I don't like is that I have to scroll left to right to see the whole page (in a 22in widescreen monitor). This may be resolved when the HTML / CSS are valid. If not it might be worth looking at a menu bar that runs across the page rather than down it.

The markup (HTML) is invalid, most of the errors are minor like the superfluous !'s at the end of comments. But the use of repeated ID attributes can have more drastic consequences for your layout. ID attributes have to be unique, whereas class attributes can be used multiple times. Also the CSS has a couple of errors, again nothing major, but best to get them sorted before recoding for the ranked div idea.

As for the ranked div idea, which I like, it should be fairly easy to implement, you can retrieve all the data for each poster into an array and then compare the posting date. Then it would be a case of assigning the correct <DIV> ID to the newest and the the rest in order.

[griever]

ok so i'd create an array fill it with the authors names, sort the array by newest and assign the authors to divs from left to right? sorry rince I'm trying to find more info on using arrays, but I'm confused about what I'm actually filling the array with...

[griever]

I found this post to list authors in order of their latest post. Does this look like something I could use?

[griever]

Would something like this work where the keys of the array would be generated by a function call of all the authors, and the values for the keys would be some function call for the latest date of that particular author's post?

<?php

$Array=array(new WP_Query ( 'author_name')=>some function call for the date of the latest post by that author?);

?>

then you could sort the array by the values, return the authors in that order and assign them to the divs from left to right in that order?

[griever]

shoot I'm having trouble figuring out how to organize this array. any more direction?