View Full Version : Getting a series of DIV tags to align horizontally?

02-07-2004, 10:40 PM
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.


02-08-2004, 12:51 AM
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 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>

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

02-08-2004, 12:58 AM
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 (http://www.codingforums.com/showthread.php?s=&threadid=32858). I used this css to get it to work:
#menu ul

#menu li {

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


02-08-2004, 01:04 AM
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.

02-08-2004, 01:22 AM
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

02-08-2004, 01:31 AM
[edit reason:duplicate]

02-08-2004, 01:32 AM
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 97and later in the document
Template 'templates/projlist.htm' does not exist or insufficient access permissions disallow access

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.

02-08-2004, 01:40 AM
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
02-08-2004, 03:47 AM
Why not use display:inline?

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

02-08-2004, 04:01 AM
The width properties are ignored on inline elements, except IIRC quirks mode in the following browsers: iew, iem and op7.

02-08-2004, 09:06 AM
and also, presumably, the items want to have padding.

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