Question

here is the site with the issue

I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.

My issues are:

1) I can’t get the div titled “fp-banner” to shrink to a height of 70px while containing the text inside.

2) The white border keeps extending all the way to the bottom and I have no idea why.

I’m trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won’t post it.

Thank you.

Answer 1

Let me address issue #2 first – the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)

So change the CSS for #featured-post to:

#featured-post {
    float: left;
    width: 370px;
    margin-left: 10px;
    padding:0;      
}

and the CSS for #featured-post img to:

#featured-post img {
    border: solid 3px #fff;
    z-index: -1;
    margin:0;
    padding: 0;

}

For issue #1, add this to #fp-banner:

height:70px !important ;

and add this to your CSS:

#fp-banner p { line-height:14px ; margin-bottom:8px }

You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.

NOTE: Don’t forget to make a backup of your style.css before you make these changes, just in case 🙂

Hope this helps!

Best,

Cynthia