Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
For some reason no matter what I put in the max-width option I'm not getting any change.. I had it working and randomly it stopped so I'm not sure what happened. Hopefully I'm just missing a simple ; somewhere or something. I'm not too verse in css but I'm learning as I'm going.
<?php
$MessageMondayMain = $_POST['MessageMondayMain'];
$MessageTuesdayMain = $_POST['MessageTuesdayMain'];
$MessageWednesdayMain = $_POST['MessageWednesdayMain'];
$MessageThursdayMain = $_POST['MessageThursdayMain'];
$MessageFridayMain = $_POST['MessageFridayMain'];
$MessageMonday = $_POST['MessageMonday'];
$MessageTuesday = $_POST['MessageTuesday'];
$MessageWednesday= $_POST['MessageWednesday'];
$MessageThursday = $_POST['MessageThursday'];
$MessageFriday = $_POST['MessageFriday'];
ob_start();
?>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8'>;
<html>
<head>
<title>GCH Cafe Menu</title>
<style>
.menu {
background: url(chef2.jpg);
width: 1200px;
height: 850px;
box-sizing: border-box;
padding-top: 80px;
padding-right: 605px;
margin: 0 auto;
color: black;
line-height: 100%;
}
.menu h1 {
font-size: 40px;
font-family: candara;
position: static;
}
.menu h2 {
font-size: 22px;
font-family: Arial;
text-decoration: Underline;
color: green;
text-transform: uppercase;
}
.menu h3 {
font-family: candara;
text-transform: uppercase;
}
.menu h4 {
font-family: candara;
font-size: 16px;
max-width: 450px;
line-height:90%;
}
</style>
</head>
<body>
<center>
<div class="menu">
<h1>GCH Cafe Menu</h1>
<br><br>
<h2>Monday</h2>
<h3><?php echo nl2br ($MessageMondayMain);?></h3>
<h4><?php echo nl2br($MessageMonday); ?></h4>
<h2>Tuesday</h2>
<h3><?php echo nl2br ($MessageTuesdayMain);?></h3>
<h4><?php echo nl2br($MessageTuesday); ?></h4>
<h2>Wednesday</h2>
<h3><?php echo nl2br ($MessageWednesdayMain);?></h3>
<h4><?php echo nl2br($MessageWednesday); ?></h4>
<h2>Thursday</h2>
<h3><?php echo nl2br ($MessageThursdayMain);?></h3>
<h4><?php echo nl2br($MessageThursday); ?></h4>
<h2>Friday</h2>
<h3><?php echo nl2br ($MessageFridayMain);?></h3>
<h4><?php echo nl2br($MessageFriday); ?></h4>
</div>
</div>
</center>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$filename = "menu.html";
file_put_contents($filename, $html);
echo file_get_contents("menu.html");
?>
You can remove the max-width and manage the spacing with padding for .menu.
.menu{
padding: 80px 675px 0 70px;
}
Related
I've tried a couple things and I can't seem to get this to update instead of recreating the file.
With A LOT of help from users here I created a menu template for our chef here at my facility. He enters his information and it creates a menu automatically with an image all kinds of fancy things.
What I'm hoping now is if he needs to change a menu item he doesn't have to retype every days information back in. I've read up on FILE_APPEND as well as fopen but don't seem to be doing what I need.
Here's the script I'm utilizing.
<?php
$MessageMondayMain = $_POST['MessageMondayMain'];
$MessageTuesdayMain = $_POST['MessageTuesdayMain'];
$MessageWednesdayMain = $_POST['MessageWednesdayMain'];
$MessageThursdayMain = $_POST['MessageThursdayMain'];
$MessageFridayMain = $_POST['MessageFridayMain'];
$MessageMonday = $_POST['MessageMonday'];
$MessageTuesday = $_POST['MessageTuesday'];
$MessageWednesday= $_POST['MessageWednesday'];
$MessageThursday = $_POST['MessageThursday'];
$MessageFriday = $_POST['MessageFriday'];
$MessageDate = $_POST['MessageDate'];
ob_start();
?>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<html>
<head>
<title>GCH Cafe Menu</title>
<style>
.menu {
padding-top: 22px;
padding-right: 350px;
box-sizing: border-box;
margin: 0 auto;
line-height: 100%;
color: black;
overflow-y: scroll;
}
.menu h1 {
padding-top: 1px;
font-size: 40px;
font-family: candara;
position: relative;
}
.menu h2 {
z-index:3
font-size: 30px;
font-family: Time New Roman;
text-decoration: Underline;
color: black;
text-transform: uppercase;
color: rgb(54,113,91);
}
.menu h3 {
z-index:3
font-size:25px;
font-family: candara;
text-transform: uppercase;
text-weight: bold;
color: rgb(152,180,155);
}
.menu h4 {
z-index:3
font-family: candara;
font-size: 18px;
line-height:100%;
width: 650px;
color: gray;
}
.container {
position:absolute;
}
.outline {
position: absolute;
left: -570px;
z-index:1
}
.chef {
position: absolute;
top: 90px;
left: 150px;
z-index:2
}
.date {
position: absolute;
top: 810px;
right: 210px;
z-index:2
}
</style>
</head>
<body bgcolor="#f2f2f2">
<center>
<div class="container">
<img class="outline" src="plain.png" height="825" width="750">
<img class="chef" src="chef.png" height="690" width="450">
</div>
<div class="menu">
<h1><img src="cafe2.png" height="100" width="225"></h1>
<br>
<h2>Monday</h2>
<h3>-<?php echo nl2br ($MessageMondayMain);?>-</h3>
<h4><?php echo nl2br($MessageMonday); ?></h4>
<h2>Tuesday</h2>
<h3>-<?php echo nl2br ($MessageTuesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageTuesday); ?></h4>
<h2>Wednesday</h2>
<h3>-<?php echo nl2br ($MessageWednesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageWednesday); ?></h4>
<h2>Thursday</h2>
<h3>-<?php echo nl2br ($MessageThursdayMain);?>-</h3>
<h4><?php echo nl2br($MessageThursday); ?></h4>
<h2>Friday</h2>
<h3>-<?php echo nl2br ($MessageFridayMain);?>-</h3>
<h4><?php echo nl2br($MessageFriday); ?></h4>
<div class="date">
<h2>Menu Date:<br><br><?php echo ($MessageDate);?></h2>
</div>
</div>
</div>
</center>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$filename = "menu.html";
file_put_contents($filename, $html);
echo file_get_contents("menu.html");
?>
There is a specific section of my website which had broken look due to bad CSS & PHP code, which I decided to fix today. With good luck fixed a lot of it(and learned CSS along the way).
The pages I fixed have dynamic content on them - Badges like we have here on stackoverflow. Depending on user level, some people may not have any badges.
The problem is, while pages that have badges look alright, the ones which don't look entirely broken, and the rest of the content on pages shifts when there are no badges.
Any thoughts on how should I go about fixing it?
CSS:
.ms-sellerprofile {
width: 100%;
align:center;
}
.ms-sellerprofile .seller-data {
width: 100%;
display: inline-block;
align:center;
}
.ms-sellerprofile .seller-data > div {
display: inline;
float: left;
}
.ms-sellerprofile .seller-data .avatar-box-img {
float:left;
width:250px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data div.avatar-box {
margin-left: 10px;
width:250px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data .info-box {
margin-top: 10px;
margin-left: 290px;
text-align: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ms-sellerprofile .seller-data div.ms-badges {
border: 0;
margin-left: -240px;
margin-top: 40px;
}
.ms-sellerprofile .seller-data div.info-box p {
margin: 5px 0;
}
.ms-sellerprofile .seller-data div.info-box a {
color: #38B0E3;
text-decoration: underline;
}
.ms-sellerprofile .seller-description {
clear: both;
margin: 40px 0;
}
PHP:
<div class="ms-sellerprofile">
<div class="seller-data">
<div class="avatar-box-img"><img src="<?php echo $seller['thumb']; ?>" />
</div>
<div class="avatar-box"><?php echo $ms_catalog_seller_products; ?>
</div>
<div class="ms-badges"><?php foreach($seller['badges'] as $badge) { ?>
<img src="<?php echo $badge['image']; ?>" title="<?php echo $badge['description']; ?>" /></div>
<?php } ?>
<div class="info-box">
<?php if ($seller['country']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_country; ?></b> <?php echo $seller['country']; ?></p>
<?php } ?>
<?php if ($seller['company']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_company; ?></b> <?php echo $seller['company']; ?></p>
<?php } ?>
<?php if ($seller['website']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_website; ?></b> <?php echo $seller['website']; ?></p>
<?php } ?>
<!-- <p><b><?php echo $ms_catalog_seller_profile_totalsales; ?></b> <?php echo $seller['total_sales']; ?></p> -->
<p><b><?php echo $ms_catalog_seller_profile_totalproducts; ?></b> <?php echo $seller['total_products']; ?></p>
</div>
</div>
</div>
You should handle the exception cases explicitly.
if($var==NULL){
//html without using $var
}
else{
//html with use of $var
}
First time trying this and I know I've got someting backwards or upside down. I have a feeling I have my loop a little messed up too because the styling changes with each blog post. It is weird.
My main question however = How do I get these posts to display horizontally and not vertically?? Is my loop messed up? Is my CSS the issue instead (my best guess).
Here is the div site
Here was my demo site for how I wanted it to turn out to look.
I'm just showing this site so you totally "visually" understand what I am trying to accomplish.
Here is my code. It's much appreciated if I can get any help at all with this issue as it has caused me so many headaches. This is my first time doing a Wordpress template from scratch, and is definitely a learning experience.
#blog_section {
float: none;
height: auto;
width: 100%;
position: relative;
top: 0px;
left: 0px;
z-index: 19;
margin-top: 0px;
margin-left: auto;
clear: none;
background-color: rgb(26, 26, 26);
min-width: 0px;
padding-top: 8%;
padding-bottom: 8%;
margin-right: auto;
padding-right: 5%;
padding-left: 5%;
}
.blog_image {
float: left;
width: auto;
max-width: 99.260651%;
height: auto;
color: rgb(0, 0, 0);
position: relative;
top: 0px;
left: 0px;
z-index: 21;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 0%;
clear: none;
margin-right: 0%;
display: block;
}
.home_blog_title_content {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
margin-bottom: 5px;
clear: both;
min-height: 0px;
}
.home_text_title {
font-family: open-sans;
color: rgb(255, 255, 255);
line-height: 1em;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 15px;
}
.home_text_content{
margin-top: 15px;
margin-bottom: 15px;
font-family: open-sans;
}
.home_text_content a {
color: rgb(99, 130, 140);
font-family: open-sans;
line-height: 1.35em;
font-size: .85em;
}
.home_text_content a:active {
color: rgb(57, 155, 187);
}
.home_text_content a:hover {
color: rgb(57, 155, 187);
}
.home_text_content p{
font-family: open-sans;
color: rgb(212, 211, 209);
line-height: 1.35em;
font-weight: 100;
font-size: .85em;
}
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content">
<?php the_excerpt(); ?>
Read More</li>
</div>
<?php endwhile; ?>
<? endif; ?></div>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
you need to put some type of wrapping div around the individual posts
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div id="Blog_array_posts_container" class="clearfix">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<div id="blog_image" class="image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
<li><?php the_post_thumbnail('full'); ?><b/>
</div>
<p class="home_blog_title_content">
<div class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><br/></span>
</p>
<div class="home_text_content">
</div>
<?php the_excerpt('Read More...'); ?>
Read More</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
<? endif; ?>
</div>
</div>
Then give that div a width and float them or display block however you choose to lay them out. Sorry just noticed your demo site so try
.post-wrapping-div { width:33%; float: left; padding:0 20px; }
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
Live site.
Ideally, between border-top and border-bottom, I'd like to have 3 portfolio thumbnails, a divider(.png), and 3 blog thumbnails. Below the far right of each section should be '...'(next.png).
Currently, there is a random border directly on top of "Recent Work" that shouldn't be there and the '...' button for 'Recent Blog' is below the border-bottom. What is causing this/how do I remedy?
Everything was fine before I switched out the HTML for php..
<?php if ($portfolio_query->have_posts()) : ?>
<div id="recent">
<div id="recent-work">
<p><span>Recent Work</span></p>
<?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></div>
</div><!-- end recent-work -->
<?php endif; ?>
<div class="divider">
<img src="<?php echo get_template_directory_uri(); ?>/img/divider.png" alt="Section divider" id="divider" />
</div><!-- end divider -->
<?php if ($blog_query->have_posts()) : ?>
<div id="recent">
<div id="recent-blog">
<p><span>Recent Blog</span></p>
<?php while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></div>
</div><!-- end recent-blog -->
<?php endif; ?>
&
#recent {
border-top: 1px solid #202020;
padding-bottom: 40px;
padding-top: 40px;
}
#recent .divider {
display: block;
float: left;
margin-left: 20px;
padding-bottom: 20px;
}
#recent #recent-work {
display: block;
float: left;
position:relative;
}
#recent #recent-work p {
padding-bottom: 20px;
}
#recent #recent-work p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
#recent #recent-work a {
padding-bottom: 40px;
padding-right: 20px;
}
#recent #recent-blog {
display: block;
float: right;
position:relative;
}
#recent #recent-blog p {
padding-bottom: 20px;
}
#recent #recent-blog p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
padding-left: 20px;
text-transform: uppercase;
}
#recent #recent-blog a {
padding-bottom: 40px;
padding-left: 20px;
}
#recent .next {
position: absolute;
bottom: -40px;
right: 0px;
}
Try adding a closing </div> to close your first <div id="recent">
I think you are unintentionally nesting <div id="recent">....<div id="recent"> without closing either of them
You have use ids more than once and it's messing with your page. This will generate errors that search engines will use to rank you lowly. Check http://validator.w3.org/ to see for yourself.
Also you have id recent with a top border and you use the div several times. Try changing recent to a class and then change the "recent" div containing the two to a class without a border on the top.
Just post what the output looks like with the dynamic PHP and then the hard-coded HTML version, and compare them side by side. Whatever is different between them is the answer.