Getting a series of DIV tags to align horizontally?

[WA]

I'm trying to get a series of DIV tags to align horizontally, with each DIV being a menu item. What's the best way to do this, if any? For example:

<div>Menu item 1</div> <div>Menu item 2</div> <div>Menu item 3</div>

I would use <span>, except I need to define an explicit width for each DIV among a few other things.

Thanks,

[Mhtml]

It can be a bit tricky at times, I found it best to float all the divs left and then have a span proceeding them with clear:both style.

Example -

div.menuitem {
  float: left;
  width: 120px;
}

span.clearit {
  clear: both;
  height: 1px;
}
...
<div>
<div class="menuitem">Menu item</div>
<div class="menuitem">Menu item</div>
<div class="menuitem">Menu item</div>
<div class="menuitem">Menu item</div>
<span class="clearit">&amp;nbsp;</span>
</div>
...

That should work, it gets a little fiddly though sometimes ...

[rmedek]

since these are successive menu items, maybe it would be more semantic to use a list, then assign each list an ID?

It's the same approach I'm using here. I used this css to get it to work:

#menu ul
	{
	list-style-type:none;
	padding:0px;
	margin:0px;
	}

#menu li	{
	padding:0px;
	margin:0px;
	float:left;
	}

I specified padding and margin in both because some browsers would do one and not the other...

-Rich

[liorean]

George, go have a look at listutorial <http://css.maxdesign.com.au/listutorial/index.htm> and listamatic: <http://css.maxdesign.com.au/listamatic/index.htm>

They cover the thing and have a nice set of outlinks as well.

[Mhtml]

I was wondering why you were going to use divs instead of a list, I figured there was a good enough reason for it. They work pretty well.

Example ( like a million others ) : http://mhtml.ithium.net/class_test.php

[liorean]

[edit reason:duplicate]

[liorean]

Mhtml:
In the projects section you get this warning:

Warning: mysql_result(): date not found in MySQL result index 12 in /home/mhtml/public_html/common/classes/mith_template.php on line 97

In the resource section:

Warning: mysql_result(): supplied argument is not a valid MySQL result resource in /home/mhtml/public_html/common/classes/mith_template.php on line 97

and later in the document

Template 'templates/projlist.htm' does not exist or insufficient access permissions disallow access

Articles:

Not Found
The requested URL /articles.php was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.29 Server at www.mhtml.ithium.net Port 80

Spelling error in the news section "[...]to the yaer and month[...]". yaer -> year


And finally I think you should use a vertical-align: bottom; for your emoticons to make the text flow better.

[Mhtml]

lol, I was just about to fix those errors as I'm planning on making that the release version of my site today, at the moment it's just in development.

vertical-align: bottom is a good idea though thanks!
I think I'll post my own thread about this, to keep this one focused on the original problem.

[Alex Vincent]

Why not use display:inline?

Also, if you're worried about an explicit width, try the min-width and max-width properties of CSS.

[liorean]

The width properties are ignored on inline elements, except IIRC quirks mode in the following browsers: iew, iem and op7.

[brothercake]

and also, presumably, the items want to have padding.

Float is the way to go I reckon - float:left and clear:none