Div background getting cutoff

HTML & CSS
1

riddle me this… on this page why doesn’t the background of the .entry-content div, which also surrounds the “Products & Services” area extend all the way to the bottom of that area?

here’s the HTML


<div class="entry-content">
<h1>Welcome to Vintage Pool Tables</h1>
<h2>Unique, antique & vintage pool tables & accessories</h2>
<p>Vintage Pool Tables was established to fill a growing need in the pool table market. Instead of paying high end retail for a new pool table or answering an ad for a used pool table that turns out to be a piece of junk, buying from us will bring you true satisfaction and peace of mind. We service the greater New York Tri State area and beyond.</p>
<hr>
<div class="product_home_container">
</div>

here’s the CSS


.entry-content {
    background: url("/wp-content/uploads/site-elements/content-bg.png") repeat scroll 0 0 transparent;
    border-radius: 15px 15px 15px 15px;
    margin-left: -20px;
    width: 685px;
}

Please advise. Thanks in advance.

2

You have to use this code

<div style="clear: both;"></div>

at the end of entry-content div

3

ok. thanks!

4

Rather than adding something to the HTML, a better approach is to add this to the CSS:

.entry-content {
    background: url("/wp-content/uploads/site-elements/content-bg.png") repeat scroll 0 0 transparent;
    border-radius: 15px 15px 15px 15px;
    margin-left: -20px;
    width: 685px;
    [COLOR="#FF0000"]overflow: hidden;[/COLOR]
}