This question already has answers here:
How can one create an overlay in css?
(9 answers)
Closed 4 years ago.
I'm trying to move the title upper inside of the pic.I'm created an div but it doesn't appear correctly.Then I remove.I changed to code of the existing div.
but show . I tried margin-top but not work.
CSS
.lazy-enabled #main-content .first-news img {
height: 310px;
}
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
Div PHP
<div id="baslist">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail( 'tie-medium' ); ?>
<span class="fa overlay-icon"></span>
</a>
<h2 class="post-box-title"><?php the_title(); ?></h2>
</div><!-- post-thumbnail /-->
<?php endif; ?>
</div>
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
}
You need the thumbnail wrapper to be position: relative, and the title to be position: absolute. Then you can put it on the bottom of the wrapper and add whatever margins you require.
.post-thumbnail {
position: relative;
}
.post-thumbnail .post-box-title {
position: absolute;
bottom: 0;
margin: 20px;
}
.post-thumbnail .post-box-title a {
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
<div id="baslist">
<div class="post-thumbnail">
<a href="#" rel="bookmark">
<span class="fa overlay-icon"></span>
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>
<h2 class="post-box-title">Post Title</h2>
</div>
</div>
Use position: absolute to position it at the top of relatively positioned div
Related
Here is my code.
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="box">
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
Having a problem with the images are not displaying the way I expected to, every time I insert or add a new image, it always go to the next row.
This is what I want for the layout.
But instead it keeps on displaying on the next row every time I add new image.
I also tried put it in a row class, but nothing happens.
Here is my CSS code.
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.panel {
height: 230px;
min-width: 250px;
margin: 10px;
flex: 1 1 30%;
}
.image {
background-size: cover;
height: 230px;
}
.overlay {
position: relative;
background-color: rgba(15, 10, 36, 0.5);
height: 230px;
}
.content {
text-align: center;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Solved this by moving the div container outside the php code.
Check the code below.
<div class="box"> <!-- This div -->
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div> <!-- and this div -->
I've tried different approach but it did not work with me,
I hope this can help other people who's having the same problem as mine. Just put the div container outside the iteration.
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;
I would like to create a website with a tile layout, similar to the new Windows style. https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2013/03/metro-template.png <- kind of like this, except that in my case:
each tile is the same size (square) (.box)
The text should be in the centered in the tile (.center-box-content)
each tile should entail two buttons in its lower right corner, in addition to the text (.lower-right-box-content)
The buttons are edit and trash icons, so that the text in the tiles can be changed.
I have accomplished this, but the problem is: The buttons seem to be dependent on the text length.
I've assigned them an absolute position in the css file, yet they don't stay put.
If the text in the tile is longer, they move all the way past/beyond the tile's borders, which they shouldn't surpass. It's a complete mess. I have tried everything but I can not find a solution. I am hoping that you guys can take a look and maybe see what I am missing? Here's my CSS Code:
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
padding: 7px;
}
.center-box-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lower-right-box-content {
position: absolute;
float: right;
padding: 2px;
bottom: -60px;
right: -5px;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
Here is my HTML Code: (The PHP bit just reads out the text from the data base, which is an event name, event description, and event date)
<!--the entire square tile -->
<div class="box red-box" height="100%" width="100%">
<!--this centers the text within the tile -->
<div class="center-box-content">
<!--echo the name -->
<b><?php echo $row["title"]; ?></b>
<!--echo the description -->
<?php echo $row["description"]; ?>
<br> • <!--echo the date -->
<?php echo $row["date"]; ?> •
<!--edit and delete button in the lower right corner of the tile -->
<!--this is the part that keeps moving as the text gets longer -->
<div class="lower-right-box-content">
Upcoming Events <span style="display:inline-block; width: 20px;"></span>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</span>
</a>
</div>
</div>
</div>
<?php };
?>
For ideal management of "box" today we use the grid. One example css for 6-columns grid:
body {
font-family: 'Ariel', sans-serif;
font-weight: 100;
font-size: 1em;
color: #faf3bc;
background-color: #0976B2;
}
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
/* margin-right: 1.25%; */
float: left;
display: block;
}
.last {margin-right:0; }
.container{
clear:both;
width: 90%;
max-width: 800px;
padding: 0% 0;
margin: auto;
}
img {
max-width: 100%;
}
h1 {
color: #ffffff;
}
a:link {color:#b4c34f; text-decoration:none;} /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;} /* selected link */
a.selected {color:#ffffff;} /* selected link */
ul {
list-style-type:none;
}
.form-input {
height: 30px;
}
#media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}}
HTML for 3 "box" in raw:
<div class='grid_2'>
</div>
<div class='grid_2'>
</div>
<div class='grid_2 last'>
</div>
HTML for 2 "box" in raw:
<div class='grid_3'>
</div>
<div class='grid_3 last'>
</div>
Maybe you need more grid-columns, go ahead, learn responsive web design.
Is the square the direct parent of those absolutely positioned elements? It should be, and it needs to have position: relative for the absolute position to work.
And erase the float from those elements - it doesn't make sense for absolutely positioned elements.
Here is the jsfiddle link
You need to set the .lower-right-box-content to position:relative and then make the buttons absolute positioned.
<div class="lower-right-box-content">
<div style="display:inline-block;margin-right:40px;text-align:justify;"> Upcoming Events longggg text does not matter </div>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button" style='position:absolute;bottom:10px;right:5px;'> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button" style="position:absolute;bottom:10px;right:20px;">
</span>
</a
</div>
</div>
I have used inline styles for clarity. Please update the styles in stylesheet with appropriate selectors.
Place the buttons in their own div.
Add position: relative to the box.
Use position: absolute to place the text and buttons to the bottom.
To ensure longer text does not overlap with the buttons, add some padding to the text.
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.center-box-content {
text-align: center;
}
.upcoming {
position: absolute;
bottom: 0;
text-align: center;
left: 0;
right: 0;
padding: 0 30px; /* ensure the text clears the buttons */
}
.buttons {
position: absolute;
bottom: 0;
right: 0;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events events events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>
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.