shwetha Manmatha shwetha Manmatha - 4 months ago 21
CSS Question

Restaurant Menu

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

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>