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:
<dt>Risotto £5</dt>
<dd>with celery and parmesan</dd>
</dl>
.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
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>