Bullets List - using divs and css

Attemp 2 with margin

by Ben Clayton

HTML

<div class='bullet-content level1'>
    <div class='bullet-num'>1</div>
    <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>
</div>

<div class='bullet-content level2'>
    <div class='bullet-num'>1.1</div>
    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.<br/>
</div>
<div class='bullet-content level2'>
    <div class='bullet-num'>1.2</div>
    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.<br/>
</div>

<div class='bullet-content level1'>
    <div class='bullet-num'>2</div>
    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.<br/>
    This is the bulleted content.<br/>
    This is the bulleted content.<br/>
    
    <div class='bullet-content level3'>
        <div class='bullet-num'>a)</div>
        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.<br/>
    </div>
</div>

CSS

.bullet-content.level1 {
    font-weight:bold;
    line-height:22px;   
}
.bullet-content.level2 {
    font-weight:normal;
    
}
.bullet-content.level3 {
    font-size:0.9em;
    font-weight:normal;
}

.bullet-content {
    position:relative;
    margin:0px 0px 6px 30px;
}

.bullet-num {
    position:absolute;
    left:-30px;
    top:0px;
    width:40px;
    }