Question

I have a horizontal band on my webpage which is a div class called horizontal-strip, and I have sub-divided this into 2 separate classes called left-horizontal and right-horizontal, so I can have a list of news headlines on the left-hand half and an email signup form on the right-hand half. The horizontal-strip div has a background image, but now that I’ve added the left-horizontal and right-horizontal classes, the image is not showing through.

.horizontal-strip {
    background: url("ColBackground.png") scroll center top repeat;
    margin: auto auto 10px;
    padding: 5px;
    width: 950px;

}

.horizontal-strip .left-horizontal {
    float: left;
    width: 450px;

}

 .horizontal-strip .right-horizontal {
    float: right;
    width: 450px;

}

This is what the HTML code looks like:

<div class="horizontal-strip">
    <div class="left-horizontal">
        <h1>Top Stories</h1>


        <ul class="news-listing">
        <li>list of links here... </li>
        </ul>

    </div>  <!-- Closes left-horizontal div -->

    <div class="right-horizontal">

        <h1>News Sign-Up</h1>
        <p>Enter your email address below to receive automatic updates when a new story is added.</p>

        <form action="">
            Email: <input name="email" type="text">
            <input name="submit" value="Submit" id="submit-button" type="submit">
        </form>

    </div>  <!-- Closes right-horizontal div -->
</div>  <!-- Closes horizontal-strip div-->

Can anyone tell me why the background image isn’t showing through?

Answer 1

You’ve not cleared the float. Add overflow: hidden to your .horizontal-strip { }. This will clear the float and make the wrapper fill to contain the contents.