WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 2 colums with diffrent categories (1 post)

  1. azezer
    Member
    Posted 4 years ago #

    Hey

    Im stuck

    I want to accomplish 2 colums with posts, left and right.

    left with posts from "featured"
    and right with the rest.

    Im having trouble to keep the right colum posts to the right and the left to the left.

    Any godd tips wehere i can read about this?

    Its a hard part to master the floats so i fell that i need som help here.

    html:

    <br />
    <?php get_header(); ?></p>
    <p>    <div id="coreContent" class="hfeed"></p>
    <p><?php if (have_posts()) : ?></p>
    <p>    	<?php<br />
    query_posts('showposts=3');<br />
    $ids = array();<br />
    while (have_posts()) : the_post();<br />
    $ids[] = get_the_ID(); ?></p>
    <p>	<div class="hentryLeft"></p>
    <p>		<h4><?php the_title(); ?></h4></p>
    <p>		<?php the_excerpt(); ?></p>
    <p>	</div></p>
    <p><?php endwhile;<br />
    ?></p>
    <p><?php<br />
    query_posts(array('post__not_in' => $ids));<br />
    while (have_posts()) : the_post(); ?></p>
    <p>	<div class="hentryRight"></p>
    <p>		<h4><?php the_title(); ?></h4></p>
    <p>		<?php the_excerpt(); ?></p>
    <p>	</div></p>
    <p><?php endwhile;<br />
    ?></p>
    <p>	<?php else : ?></p>
    <p>	<?php endif; ?></p>
    <p>  </div></p>
    <p><?php get_footer(); ?><br />

    Css:

    </p>
    <p>#coreContent{</p>
    <p>  width: 500px;<br />
      margin-top: 8px;<br />
    }</p>
    <p>.hentryLeft{<br />
      float: left;<br />
      clear: left;<br />
      width: 200px;<br />
      padding-bottom: 37px;<br />
      background: grey;<br />
      margin-bottom: 30px;<br />
    }</p>
    <p>.hentryRight{<br />
      float: right;<br />
      clear: right;<br />
      width: 200px;<br />
      padding-bottom: 37px;<br />
      background: green;<br />
      margin-bottom: 30px;<br />
    }</p>
    <p>#showLeft {<br />
    	float: left;</p>
    <p>	width: 220px;<br />
    	border: thin solid blue;</p>
    <p>}</p>
    <p>#showRight {<br />
    	float: right;<br />
    	width: 220px;<br />
    	border: thin solid blue;</p>
    <p>}<br />

    Would be thankful for som guidiance =)

    azezer

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags