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 contained 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 in div
class=box. 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 tested the same thing with minimal CSS:
#wrap {
margin-left: auto;
margin-right: auto;
width: 250px;
display: block;
}
#content {
width: 100%;
margin-top:0px;
display: block;
}
#left {
width: 100px;
float:left;
display: block;
}
#right {
width: 100px;
float: right;
display: block;
}
Same result.
I'm baffled. Any suggestions on where to look?
Regards and thank you,
Bill B
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
