Setting Up Your Restaurant Menu Using CSS

If this blog post helped you in some way, please leave a comment letting me know. Thanks!

Looking at a restaurant menu, you may think it is quite easy to get the item on the left and the prices on the right. After all, in Microsoft Word, you can just hit tab a couple times after each item and voila!

Unfortunately for coding for the web, its not nearly as easy. You have three options. The easiest is to just create a giant image and use that with a couple splices here and there. The other option is two use a table layout. But, if you’re a <div> purist, you may have just grimaced at the mention of using tables. So, how do you setup your menu using as little code as possible and keeping it simple?

I have found <span> to be my new best friend. Let’s start with your CSS file first. The following code will allow you to use an unordered list for each item. After each item, you’ll insert a <span> with the price and this will display at the far right. Now, to make sure this doesn’t affect any other elements on your page, I recommend wrapping it all in a <div>. I called my <div> #foodmenu. I didn’t use #menu as I needed my menu to be W3C compliant for HTML5.

#foodmenu li span{float:right;}
#foodmenu li em{float:left; font-style:normal;}
#foodmenu li{width:100%; float:left}

Now for your actual HTML.

<div id=”foodmenu”>
<li>Sandwich<span>$7.99</span></li>
<li>Salad<span>$6.99</span></li>
<li>Burger<span>$5.99</span></li>
<ul>
</div>

From here, you can easily go back and adjust your CSS to change how the menu is displayed and adjust your positioning. You can see how easy and simple the actual HTML is to place. If you compare this to a <table> layout, you’ll see how much more complicated the code can get, not to mention harder to style.

Example screenshot based on the code above:

css restaurant menu

For help in setting up your own online restaurant menu, send me an e-mail.

, , , , ,

2 Responses to Setting Up Your Restaurant Menu Using CSS

  1. RKG February 27, 2012 at 11:37 am #

    Thanks for this post–I’m trying to learn XHTML/CSS as kind of a hobby, and I’m setting up a small site for a friend who owns a small convenience store/deli. Your instructions were very helpful!

  2. connektor July 6, 2012 at 1:05 pm #

    Thanks a lot. Saved me a lot ot time. Never thought it could be done this way.

Leave a Reply