How do I get div tags to align next to each other?

[omglookitsagoat]

Every time I make a div tag, it automatically moves down to the next line and everything that was next to it goes on the line below it. I want to be able to make a div tag for each link I have on a line of text so that I can add padding to the div tags and result in having the links more spaced out. I want all the links to stay on the same line, though, when I add the div tags around them.

http://www.microraptorarts.com/testindex.html

For example, the navigation links on this page should be enclosed within divs with classes that will space them out, but keep them on the same line if possible. I applied div tags to all the links (yes, the home text is supposed to be slightly to the left of the links), but as soon as I apply div tags, they move down the the next line.

Here is a link to the css attached to the page:
http://www.microraptorarts.com/testmr.css

I'm using adobe dreamweaver CS4 btw.

 

[PointNow]

In this case for your navigation links, you will have to make a UL tag and for this list you will need an LI tag for every link.

 

[AndrisE]

It's because DIV tag is a block element. You can change display type for any element by setting display:inline/inline-block/block or floating it.

If you put some divs and set their style to "float:left" and give known width then they will display in one row.

 

[Mug]

don't forget to clear your floats if you end up using them:
http://www.quirksmode.org/css/clearing.html

divs are not really good idea for navigation. Have a look at unordered lists:

<div>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</div>

You will have to style the list within the CSS to get it looking right.

 

[jeverd01]

don't forget to clear your floats if you end up using them:
http://www.quirksmode.org/css/clearing.html

divs are not really good idea for navigation. Have a look at unordered lists:

<div>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</div>

You will have to style the list within the CSS to get it looking right.

If you use an unordered list check out

display: inline-block

Here is a cross browser solution

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

You can set the li tags to inline then the a tags to inline block and they will all line up plus you can set width/height background image and everything else you would with a block element.

 

[omglookitsagoat]

I tried these solutions in the css:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
display:inline;

it's linked to the .li and the #nav for the ul tag, but it still doesn't seem to work. Does anyone see anything wrong with my css page? the #nav and .li are listed at the bottom of the css at this location:

http://www.microraptorarts.com/test2mr.css

 

[omglookitsagoat]

Thanks for the links and advice everyone. I'm trying my best to make sense of it.

 

[omglookitsagoat]

Hey I figured out how to do it with divs. float: left;

BTW, thanks AnriseE for suggesting that

BTW, does anyone think a table would be a better way to handle the spacing? Or should I avoid using tables?

 

[LouTheDesigner]

Hey I figured out how to do it with divs. float: left;

BTW, thanks AnriseE for suggesting that

BTW, does anyone think a table would be a better way to handle the spacing? Or should I avoid using tables?

To quote a member of this forum who no longer seems to post, horrorshow78, "Tables are for data, not for layout."

-Lou

 

[PixelPusher]

Yeah floating is the better option in my opinion...very easy to use. Glad you figured it out