Question

I would like to acheive the following using html and css. What would be the best approach to designing the list.

Answer 1

Here is one way of doing it (See it live in jsFiddle: http://jsfiddle.net/Nw99Z/44/ ):

HTML

<div id="box1">
    <span class="num">1</span>
    <h1>We Rule</h1>
    You don't know how much
</div>
<div id="box2">
    <span class="num">2</span>
    <h1>We Super Rule</h1>
    You don't know how much
</div>
<div id="box3">
    <span class="num">3</span>
    <h1>We Are Insanely Awesome</h1>
    You don't even undestand
</div>
<div id="box4">
    <span class="num">4</span>
    <h1>Yes, It's True</h1>
    Yep, it's true
</div>
<div id="box5">
    <span class="num">5</span>
    <h1>I'm Still Talking</h1>
    Yep, I am
</div>

​

CSS

body {
    background-color: #0e1013;
    font-family: Helvetica, Arial, sans-serif;
}
div {
    background-color: #414141;
    color: #ababab;
    padding: 16px 0 16px 100px;
    margin: 16px 0 16px 32px;
}
div span.num {
    color: #fff;
    font-size: 56px;
    font-weight: bold;
    display: block;
    margin-left: -116px;
    position: absolute;
}
div h1 {
    font-size: 38px;
    color: #fff;
}

div#box1 { width: 370px }
div#box2 { margin-left: 100px; width: 440px }
div#box3 { width: 700px }
div#box4 { margin-left: 160px; width: 460px }
div#box5 { width: 430px }

​

Result