• First off, sorry if the way I say things in this isn’t technically correct; I’m more used to doing websites on their own, but I inherited this website post-completion at work. I’m really unfamiliar with WordPress and with the finer points of php, so I’m in a bit of a jam.

    On the website, there is a page that uses php to call in a certain group of articles. The page is here.

    In the “Our Team” section, the blocks break up when we add or change the amount of people in it. They should continue in straight rows of 3 throughout all of the profile blurbs, but they will bump two imaged down to the next line and leave an image up on the right side at random.

    My basic understanding of HTML is that when using inline display and floats, is that it needs to be cleared at some point in time as a sort of hack to make the code work properly. If I just take the straight HTML in an editor and add a clear div, then it fixes the issue.

    My problem is that I have no idea how to do that when it’s being fed in automatically with php.

    Here is the PHP code that calls the articles:

    <h1>Our Team:</h1>
    	<div class="container">
    		<div class="block-holder">
                        <?php
    			$latest_posts = get_posts('orderby=date&numberposts=120&category=6');
    			if($latest_posts) :
    			foreach($latest_posts as $key=>$lpost):
    					?>
    
    		<div class="block">
                            <div class="image"><?php echo get_post_attachments($lpost->ID, 1); ?></div>
                    <strong><?php echo $lpost->post_title; ?></strong>
                    <span><?php  echo get_post_attachments_post_content($lpost->ID, 1); ?></span>
                    <a href="<?php echo get_permalink($lpost->ID); ?>" class="view">View Profile</a>
    		</div>
    
    		<?php
    			endforeach; endif;
    		?>
    
             </div>

    Here is the CSS used on it:

    .container{
    	height:1%;
    	/*overflow:hidden;*/
    	width:938px;
    	margin:8px -11px 0;
    	background:#fff8df url(images/bg-container.gif) repeat-x;
    	padding:18px 10px 20px;
    	border:solid #b3b3b3;
    	border-width:0 1px 1px 1px;
    	border-bottom:1px solid #8e8e8e;
    }
    .block-holder{
    	width:978px;
    	margin:0 -40px 0px 0;
    	overflow:hidden;
    }
    .block{
    	float:left;
    	width:290px;
    	font-size:11px;
    	margin:12px 29px 12px 7px;
    	display:inline;
    	overflow:hidden;
    }
    .block .image{
    	float:left;
    	margin:0 14px 0 0;
    	width:113px;
    	border:1px solid #8d8d8d;
    	background:#252525;
    }
    .block .image img{
    	display:block;
    	margin:0 auto;
    }
    .block strong{
    	font-size:14px;
    	letter-spacing:-1px;
    	display:block;
    	margin:3px 0 0;
    }
    .block span{
    	font-size:12px;
    	min-height:46px;
    	height:auto!important;
    	display:block;
    	height:46px;
    }
    .block .view{
    	background:#fff;
    	border:1px solid #c3c3c3;
    	font-size:12px;
    	color:#252525;
    	display:block;
    	width:88px;
    	overflow:hidden;
    	text-align:center;
    	line-height:29px;
    	margin:0 0 30px;
    }

    If you need more, just ask me. Thank you!

  • The topic ‘Stlying block/in-line article divs that are pulled in using php?’ is closed to new replies.