Bullets List - using divs and css

by Ben Clayton

HTML

<font color=red>Fudge as the right div is fixed width, would need JS helper to get size correct</font>
<div class='bullet-wrapper'><div class='bullet-num'>1.0</div><div class='bullet-content'>
        <p>This is the bulleted content but if you type lots of text does it wrap in a nice logically stylylish way, or does it all fall apart.</p>
        <p>This is the bulleted content.</p>
        <p>This is the bulleted content.</p>
    </div></div>

<div class='bullet-wrapper'>
    <div class='bullet-num'>2.0</div>
    <div class='bullet-content'>
        <p>This is the bulleted content.</p>
        <p>This is the bulleted content.</p>
        <p>This is the bulleted content.</p>
        <p>This is the bulleted content.</p>
        
        <div class='bullet-wrapper'>
            <div class='bullet-num'>2.0.a)</div>
            <div class='bullet-content'>
                <p>This is the bulleted content.</p>
                <p>This is the bulleted content.</p>
                <p>This is the bulleted content.</p>
            </div>
        </div>
    </div>
</div>

CSS

.bullet-wrapper{
    margin:2px 0px;
}
.bullet-wrapper p{
    margin:0px 0px 6px 0px;
}

.bullet-num {
    vertical-align:top;
    width:5%;display:inline-block;
    xborder:solid 1px red;
    }
.bullet-content {
    width:95%;
    display:inline-block;
    xborder:solid 1px green;
}
.bullet-content .bullet-content {
    width:450px;
}