Does <div> cause line breaks?

Question

I have a menu bar and I want to create a div for each menu item so that they are separately horizontally by 5px. How do I do that?

It seems that by simply wrapping an item around a div, it automatically causes each menu item to go on a new line.

Answer 1

<span> is what you are looking for

Especially for menus you might have a look at suckerfish dropdown menus

Answer 2

By default <DIV> does cause a line break.

You probably want to use a <SPAN>.

Answer 3

Yes, it does usually. Try <span>

Answer 4

display: inline;

Answer 5

divs are block elements by default. You can change this in CSS

 display:inline

but you might be better off using a list and CSS to achieve what you want.

<style>
   .mymenu{
      list-style:none; 
   }
   .mymenu li{
      display:inline;
      etc
   }
</style>
<ul class="mymenu">
    <li>Item</li>
    <li>Item</li>
</ul>

Answer 6

You could make them float, but for menu items, it is far more common to use lists to create these.

Answer 7

<div> is display: block - typically it forms a box area around your content and you'll get something like a linebreak after it (although it's not a linebreak, exactly, because 'div' and 'line' are not concepts that go together). <span> is display: inline, which means that its content is flowed (i.e. wrapped) in a paragraph, like a bold or italic highlighting. It doesn't even always take a box shape: imagine

This is a paragraph and <span> this is a
highlighted section.</span>

which needs two boxes to describe the spanned inline element (set borders on to see how it looks).

You probably want to use block elements for menus, because the box sizing makes it simpler to even the height (and optionally the width) of the menu elements - inline elements can leave you with variable heights and widths - simplifying the situation greatly.

With block elements, use float: left to make them line up next to each other horizontally.

But there are so many complications and opinions on this that you'd be better off researching the situation more thoroughly - I recommend http://www.alistapart.com/ for starters, which has several worked menu examples.

Answer 8

if you use span you can't use top and bottom margins and your menu items will split across lines (very ugly if they also have a border). I recommend floated block A tags which are compact and work nicely with text-mode browsers.

<style>
#menu a {display: block; border: 1px solid blue; padding 5px; float: left; margin-right: 5px;}
</style>
<div id="menu">
  <a href="/1/">Item 1</a> <a href="/2/">Item 2</a>
  <div style="clear:left"></div>
</div>