Text pushing Div Down

Question

I'm developing a Wordpress Theme and im doing the post boxes on the main page. Currently, I've got a blurred background and then text overlaying that with a background on that to distinguish between the background and the text. For short titles, I am getting it to work, for longer titles the text is pushing down the actual photo box.

I've tried to get things to work but I'm not getting any progress or it just looks even weirder, some help with this would be appreciated.

HTML:

<div id="hanger">
<div class="h2"><a href="<?php the_permalink() ?>" title="<?php     the_title_attribute(); ?>"><h2><?php the_title(); ?></h2></a>       </div>
<div id="bgdiv"><div id="hang-bg" style="background-image: url('<?php echo $background[0]; ?>'); background-size: cover; height: 200px; -webkit-filter: blur(5px);-moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);   margin: -5px -10px -10px -5px; "></div>
</div></div>
<?php endwhile; else : ?>
<?php endif; ?>

CSS:

#hanger {
    height: 200px;
    margin-top: -20px;
    text-align: center;
}

#hanger h2 {
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

#hanger a {
    font-size: 20px;
    color: white;
    text-decoration: none;
}

#topbg {
    height: 40px;
    width: 100%;
    background: #7f7f7f;
    opacity: 0.5;
    position: relative;
    top: -220px;
}

#bgdiv {
    overflow: hidden;
    border: 1px solid lightblue;
    position: relative;
    top: -70px;
    z-index: 0;
}

.h2 {
    background: url("./images/opac-grey.png");
    position: relative;
    z-index: 2;
    width: 698px;
    margin: 0 auto;
}

can you make a fiddle or codepen demo? I guess the fixed height of `#topbg` is the cause of this, can you try changing that to `min-height:40px;` instead of `height:40px;` — Aziz, Sep 17 '15 at 19:42
@Aziz it's a wordpress site, so the JsFiddle doesnt transfer over the title etc. I'm not using `#topbg` anymore, so it's not that. Here's a link: http://theuntoldspiral.com/ — Shedlor, Sep 18 '15 at 16:18

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Thanks for sharing the link, helped a lot! Your code is a bit complicated for a simple structure, all you need is a container div which has 3 things: title, background div, content div - it can be simplified as such:

post box > post background + post title + post content

which in code is the following:

.hanger > .hanger-bg + (h2>a) + .hanger-content

JSFiddle Example

HTML / WordPress Code

<!-- post box -->
<div class="hanger">
    <div class="hanger-bg" style="background-image: url('<?php echo $background[0]; ?>');"></div>
    <!-- post title -->
    <h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <!-- post content -->
    <div class="hanger-content">
        <?php the_content(); ?>
    </div>
</div>
<!-- end post -->

<?php endwhile; else : ?>
<?php endif; ?>

CSS Code

/* post box */

.hanger {
    min-height: 200px;
    margin-bottom: 20px;
    text-align: center;
    color:#FFF;
    border: 1px solid lightblue;
    position:relative;
}

/* post background */

.hanger-bg {
    background-size: cover;
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
    /* blur effect */
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

/* post title */

.hanger h2 {
    font-size: 35px;
    margin:0;
    text-transform: uppercase;
    /*background: rgba(238, 238, 238, 0.5);*/
    background: url("./images/opac-grey.png");
    min-height:40px;
}

.hanger h2 a {
    color: white;
    text-decoration: none;
}

/* post content */

.hanger-content {
    padding:20px;
    text-align:left;
}

A Few notes:

I placed the a link tag INSIDE the h2 tag for better semantics
The background div was achieved using the position:absolute + z-index:-1; css trick
Please note that using the same id for more than one element is a syntax error - ids are unique so use classes instead. read more on class vs id

Text pushing Div Down

1 Answers1