Restaurant Menu

Question

I want create a Restaurant style menu with menu item left aligned and price right aligned.
I have posted my HTML and CSS. Can someone help me how to achieve this?

HTML as below:

salad £4.50

(with goat cheese)

<dt>Risotto £5</dt>

<dd>with celery and parmesan</dd>

</dl>

CSS as below:

.rm-content dl{

    margin: 0;

}



.rm-content dl dt,

.rm-content dl dd{

    display: block;

    margin: 0;

}



.rm-content dl dt {

    font-weight: 400;

    text-transform: uppercase;

    color: #C99944;

}



.rm-content dl dd {

    font-size: 13px;

    padding: 0 5px 15px;

    line-height: 12px;

    color: #C99944;

}



Thank You

Answer 1

Here is a fiddle that will do it.

http://jsfiddle.net/zajgvty3/1/

Basically the dt has two elements (classes title & price) where they both float.

.rm-content dl{
    margin: 0;
}

.rm-content dl dt,
.rm-content dl dd{
    display: block;
    margin: 0;
}

.rm-content dl dt {
    font-weight: 400;
    text-transform: uppercase;
    color: #C99944;
    clear:both;
}

.rm-content dl dt div.title{
    float:left
}

.rm-content dl dt div.price{
    float:right;
}

.rm-content dl dd {
    clear:both;
    font-size: 13px;
    padding: 0 5px 15px;
    line-height: 12px;
    color: #C99944;
}

Sample Html

<div class="rm-content">
    <dl>
        <dt>
            <div class="title">
            Risotto 
            </div>
            <div class="price">
            £5
            </div>
        </dt>
        <dd>with celery and parmesan</dd>
    </dl>

</div>

Restaurant Menu

Sign up