CSS2 - DIVs, Lists and Margins - No Respect

I am new to this list but perhaps someone could help.

I am unable to get my lists to respect a *floating <div> margin.

The <h3> and <p> elements will stay the required right-margin 24px's away
from the floating div#greek, but the lists (ol, ul) will not. I have tried
giving the lists their own margins but they move from the page margin, not
from the div, which works fine, but doesn't seem the right way.

Do I need to set the lists to some display attribute? Please help.

Here is the code in strict HTML 4.01 which shows the lists giving no respect
to the right <div> margin:


<!--          S T A R T   C O D E             -->

<head>
<style type="text/css">
<!--
div#greek {
	  float: left;
	  width: 100px;
	  height: 200px;
	  border-style: groove;
	  border-width: thin;
	  border-color: #000000;
	  margin-right: 24px;
	  padding: 6px;
	  }
-->
</style>
</head>
<body>

<div id="greek"></div>

<h3>Interdum volgus videt:</h3>
<ol>
  <li><strong>Interdum volgus videt, est ubi peccat. Si veteres:</strong>

    <ul>
      <li>Interdum volgus</li>
      <li>Anteferat</li>
      <li>Comparet</li>
      <li>Ita miratur</li>
    </ul>

  </li>
</ol>

<p>Non enim si alii ad alia propensiores sunt propter causas naturales et
antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt
causae naturales at antecedentes.</p>

<!--          E N D   C O D E             -->


Thanks in advance for your precious knowledge,


Derek Rogerson

Received on Saturday, 12 January 2002 18:25:23 UTC