Grow your CSS skills. Land your dream job.

Problem with divs in single.php (WordPress)

  • # May 4, 2009 at 6:50 pm

    Hey,

    I am working on a new design for my movie blog, the work in progress can be found here: http://test.filmabend.info

    I have a problemm with my single.php and specifically the way Firefox displays it:

    I want the commentform to appear within the white background of the "post" div, that means the bottom with the rounded corners

    Code:

    should appear AFTER the comments and AFTER the comment form.

    Here is my single.php code:

    Code:
    < ?php get_header(); ?>

    < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    < ?php the_content('Weiterlesen...'); ?>
    < ?php edit_post_link('Edit','

    ‘,’‘); ?>

    < ?php comments_template(); ?>

    < ?php wp_link_pages();?>

    < ?php endwhile; else: ?>

    Sorry, no posts matched your criteria.

    < ?php endif; ?>


    < ?php get_sidebar(); ?>


    < ?php get_footer(); ?>

    The funny thing is that it works the way i want it in IE7, but not in Firefox, Firefox will push the fields for the commentform outside of the background…

    First i thought i closed too many divs or something, but i can`t find my mistake. Would be nice if someone could help.

    Thanks,
    omaha

# May 4, 2009 at 10:46 pm

Add overflow: hidden to .entrybottom and validate your html.

# May 5, 2009 at 3:21 am

I personally prefer

Code:
clear:both

Overflow:hidden seems like an accident that was not originally intended to work that way… and I don’t know how to use it right ;). It looks like either one would work here.

Using clear both would make your bottom div CSS:

Code:
.entrybottom {
background:transparent url(images/layout/entrybottom.png) repeat scroll 0 0;
clear:both;
height:21px;
width:661px;
}
# May 7, 2009 at 9:25 am

Thanks for the help, it really works and i went for the

Code:
clear: both;

solution.

Thanks again :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".