I've got a group of four DIV's I'm using as a horizontal navigation area. Ideally, it would look like 4 rectangles, one to the right of the one before it.

I'm using the following CSS for the DIVs:

#nav    {
  width: 200px;
  display: inline;
  border: 1px solid #ff0000;
  margin-top: 7px;
  margin-bottom: 7px;
}

The HTML implementation looks like this:

<div id="nav">Home<br><img src="img/nav1.jpg">
</div>

<div id="nav">Gallery<br><img src="img/nav2.jpg">
</div>

<div id="nav">About<br><img src="img/nav3.jpg">
</div>

<div id="nav">Contact<br><img src="img/nav4.jpg">
</div>

In IE, it looks like I'd like it to. I'm still tweaking the CSS, but the basic idea is there. It looks like this:



But it breaks in Firefox when the pictures are added, looking like this:




Any suggestions on how to make this look universal between the two apps, and any hints towards a better, more standard code would be nice. This'll be the first site I've used DIV's in.

Thanks much in advance!

Your navigation links are better represented as list items. Here is a good tutorial that explains how to create a list based menu.

Note that id's are used to uniquely identify an element but you have multiple div's with the same id. You should use classes instead, but that's by the by if you follow that tutorial

Or float the divs rather than setting the display to inline.

The list idea is all fine and good; however, I tried that originally, with the same problem. As soon as the picture enters the element, the successive list moves with it. For instance, when you add pictures, it would be like this:

LINK1
[picture1]LINK2
[picture2]LINK3

etc., when the look I'm trying for is:

Link1 Link2 Link3
[pic1] [pic2] [pic3]

Is there a way to set the picture beneath the text, like I'm aiming to?

Have you tried assigning a background-image to your <li>s? Something like:

li {
background: #fff url(pic.gif) no-repeat 5px 5px;
}

You can use the pixel measurements (left and top) to position the pic where you want, and you would have to manipulate with the padding on the <li>s to see it.

Alright, I've got it working now.

I did it with chrishirst's advice to try floating the div's, though to get them aligned with the rest of the document I put all of them inside of another div container, and played with margins and paddings til it was right.

Here's the final code:

#navcontainer    {
  width: 800px;
  margin: 0;
  padding: 0;
  background-color: #555;
}

html>body #navcontainer div a {
        width: auto;
        }

div.nav    {
  width: 190px;
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 6px;
  float: left;
  background-color: #555;
  border: 1px solid #777;
  font-weight: bold;
}

<div id="navcontainer">

<a href="#"><div class="nav">
Home<br><img src="img/nav1.jpg">
</div></a>

<a href="#"><div class="nav">
Gallery<br><img src="img/nav2.jpg">
</div></a>

<a href="#"><div class="nav">
About<br><img src="img/nav3.jpg">
</div></a>

<a href="#"><div class="nav">
Contact<br><img src="img/nav4.jpg">
</div></a>

</div>

And it looks like this:



Thanks, guys!