Problem getting label's to behave

I'm trying to create some forms on a web page. The forms consists of lines that hold a variety of select's, text input, labels, checkboxes etc. Two examples here: and css is at

Problem for layout.php:
I'd like to get all the input fields etc. on the same line but the <label>-section at the end jumps to the next line no matter what I do.

Problem for layout2.php:
I'd like to change the labels in the columns Started and Confirmed into text input instead but as the last line shows the following data jumps to the next line.

Basically I'm wondering what is the proper way of aligning these sorts of widgets.
A specific answer to the two questions and a link to a tutorial or some text explaining this would be highly appreciated.

I'm struggling with a trial-and-error approach to this since most tutorials I find deal with specific issues and not a broader view on the topic.

PS: Examples only tested with firefox. They validate ok so should show up ok in most browsers.

Johnny Ljunggren
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

>Problem for layout.php...
Why do you use the label tag there (with the "for" attribute pointing to an id that doesn't exist - "statustemplate")
I think labels should be used as... labels - for adjacent form elements, e.g.:
<label for="name">Name</label>
<input id="name" name="name">

You could try to use a span instead:
<span class="medium">
  <a href=""> <img src="layout.php_files/OpenTemplate.png" alt="" border="0" height="16" width="16"> Todo2</a>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The "medium" class is defined in the style sheet layout.css as "block", therefore the ToDo2 label jumps to the next row. To override the class settings, you can set for the <label> tag of the ToDo2

style="display:inline; float:none;"

Note that float style commands block display, therefore resetting one of the two is not enough.

But in general, it seems not correct to use float in your case. If you want to build a non-tabular HTML with fixed columns, you could use the style "display: inline-block;" (note that for Firefox, at least for the older versions, you should use "display: -moz-inline-block", see instead of "display: block; float: left;". I believe this change to label style in CSS will resolve all problems in your pages.

A tutorial of styles including floating and table replacement can be found here:

johnnybalubaAuthor Commented:
TName: Good question (why use label) and the answer is lack of knowledge. I got the purpose of label, for and id now (I think).
Your solution works great for layout.php. Should I just rewrite all my labels to use span instead (ie. layout2.php still look strange)?

alexcohn: Thanks for the information and the links. I removed "display: block; float: left;" and wrote "display: -moz-inline-block; display: inline-block;" instead but now the heading all come on their own line. and the Todo2 link still appear on the next line. Can you elaborate a bit on this? I'm trying to learn these things so bear with me :)

I'm also a bit confused about the usage of p, span, div and also ul and li. I'd appreciate a line or two telling when to use one or the other.

thanks again
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Block elements (<div> or  <p> are usually displayed "block")  can contain other (block and/or inline) elements and will (again: usually, there are always exceptions - see float) cause a line-break.
Inline elements (e.g <span>) can only contain other inline elements and are not followed by a line-break:

About your layout2.php, I would really put all elements that belong into one line into a div (and not use labels as containers).
So if you have 3 lines of elements, you could have 3 divs, each holding (the elements that belong into that) one line, and a wrapper div containing the 3 divs...
To keep block elements in one line, you can float them left for example (or right).
johnnybalubaAuthor Commented:
Thank's, that cleared up a whole lot.
To tell you the truth, I would suggest to use a table for your layout - it looks like it could suit your needs perfectly, even though the CSS purists would hate the idea. Use of <label> tag is not necessary, but it makes no harm. The way you use it without input element id that corresponds the "for" attribute of the label renders the labels useless, but it does not effect the layout. It's that block display style.

Now, it's my fault, I didn't have an updated FireFox at hand at that moment it happens that
  display: -moz-inline-block
stopped to work in v. 1.5 and was replaced (oh why???) with
  display: -moz-inline-stack;
see for details.

As for p, span, div and also ul vs. ol, and li - see the introduction here: - and references around.

johnnybalubaAuthor Commented:
Thanks for the input

I've tried tables on another similar web page I made and it somehow got ok, but I ran into a lot of issues there as well, that's why I wanted to try doing it purely through css. As I don't know the toolbox well enough I tend to do more trial and error than necessary. Learn as you go so to speak.

Your tip works but still since my use of label was not really the correct way, I'll try to rewrite the parts that use label. Haven't had a chance to read the links I've got but I assume using span and proper div's instead would do it?

Label tag may be used inside table, div, or span tags. In HTML, some tags define the logics, and some tags define presentation. Label does not define presentation. Generally speaking, the learning curve of CSS is harder than for table-based layout, but if you want to invest in learning CSS, you will be able to build more sophisticated HTML pages.

This is the layout.php in table format:
<head profile="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="" />
 <script src="/layout/calendar.js" type="text/javascript"></script>
<link href="/layout/layout.css" rel="stylesheet" type="text/css" media="screen" />
  label { display: inline; float: none; }
<div id="wrapper">
<form name="services" METHOD="get" ACTION="layout.php"><fieldset>
<table border="0"><tr><td>
<label for="service" class="mediumpluss heading">Type</label>
<label for="template" class="mediumpluss heading">Comment</label>
<label for="template3" class="medium heading">Offered</label>
<label for="template4" class="medium heading">Ordered</label>
<label for="template5" class="medium heading">Confirmed</label>
<label for="template2" class="medium heading">Template</label>
<select name="Select" class="mediumpluss">
    <option value="-1">&lt;n/a&gt;</option>
    <option value="1">Sel 1</option>
    <option value="2">Sel 2</option>
    <option value="3">Sel 3</option>
    <option value="4">Sel 4</option>
<input type="text" name="comment_1" class="mediumpluss" tabindex="2" value="" />
<input type="text" name="offer_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal1.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<input type="text" name="order_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal2.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<input type="text" name="confirmed_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal3.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<label for="statustemplate" class="medium">
<a href="maler/todo.txt" ><img src="OpenTemplate.png" width="16" height="16" border="0" alt="" /> Todo2</a>
<script type="text/javascript">
    var servicescal1 = new calendar(document.forms['services'].elements['offer_1']);
    var servicescal2 = new calendar(document.forms['services'].elements['order_1']);
    var servicescal3 = new calendar(document.forms['services'].elements['confirmed_1']);

I believe that it is easier to read and modify. Note that you do not need to worry about column widths at all - the table takes care of the layout automatically.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.