Support » Themes and Templates » 2 colums with diffrent categories

  • Resolved azezer

    (@azezer)


    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

  • The topic ‘2 colums with diffrent categories’ is closed to new replies.