Quantity of Content in an Element

I am new to CSS.

I am using an element as follows:

#spdisplay {
    width: 550px;
    float: right;
    display:block;
    margin-top: 10px;
}

#spdisplay .box {
    width: 545px;
    background: #F6F9FB;
    border: 1px solid #E1E1E1;
    padding:10px 10px 15px 10px;
    float: right;
}

#spdisplay .box a {
    margin: 10px 0 10px 0;
    color: #56677C;
    font-size: 0.625em;
}

#spdisplay .box p {
    margin: 5px 0 10px 0;
    line-height: 15px;
    font-size: 0.875em;
}

#spdisplay .box ul {
    padding: 0 0 7px 20px;
    margin:10px 0 10px 0;
}

#spdisplay .box li {
    margin-top:5px;
}

The element #spdisplay is contain in:

#content {
    width: 100%;
    margin-top:10px;
}

which itself is contained in:

#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 730px;
}

I inherited this so I cannot explain the design.

In HTML it appears as:

<div id="spdisplay">

    <div class="box">

        <a name="philosophy"></a>
        <h2>ITEM 1</h2>

        <p>blah, blah, blah.</p>

        <p>blah, blah, blah.</p>

        <h2>ITEM 2</h2>

        <p>blah, blah, blah.</p>

        <p>blah, blah, blah.</p>

    </div><!-- end div box -->

</div><!-- end div spdisplay -->

This works flawlessly until I exceed a certain amount of content. It 
then causes the entire page to shift to the left about 10px or so. I've 
ruled out bad markup by simply taking content that displays well and 
copying it to create more content. Same result.

I'm baffled. Any suggestions on where to look?

Regards and thank you,

Bill B

Received on Monday, 23 November 2009 11:12:33 UTC