Question

Here’s what I am looking to create. The dollar amounts are linked to a form submit by jQuery.

Here’s what I’ve got so far:

<div class="donate_left_column">
    <p>You can be the autemped lorem ipsum quisciis alic to dolupidebis consed deo vellor quam quam re:</p>
    <div class="donate_amounttable">
        <ul>
            <li><a class="donate_click" id="100" href="#">$100</a>provides 20 new novels for a college prep language arts class.</li>
            <li><a class="donate_click" id="200" href="#">$200</a>provides 1 week of childcare for a parent starting a new job.</li>
        </ul>
    </div>
</div>

Styles:

.donate_amounttable 
{
}

.donate_amounttable ul
{
    display: inline;

}

.donate_amounttable li
{
    display: inline;
    font-size: 14px;
    color: #000;
    padding-bottom: 6px;
}

.donate_amounttable a
{
    display: block; 
    font-family: din-condensed-web,sans-serif;
    background-color: #bfd475;
    padding: 6px;
    width: 50px;
    font-size: 24px;
    color: #fff;
    text-align: right;
    float: left;
    clear: left;
}

The problem is that it ends up looking like this:

Here’s a fiddle to play with: http://jsfiddle.net/rboarman/6G8wr/

Thanks for the help!

Answer 1

Your css is only having some little margin problems.
Try something like this: http://jsfiddle.net/6G8wr/2/