Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Problem getting label's to behave

Posted on 2007-03-29
Medium Priority
Last Modified: 2008-02-01
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
Question by:johnnybaluba
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
LVL 28

Accepted Solution

TName earned 1200 total points
ID: 18815705
>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>
LVL 11

Assisted Solution

alexcohn earned 800 total points
ID: 18815944
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:


Author Comment

ID: 18816880
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 28

Assisted Solution

TName earned 1200 total points
ID: 18817403
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).

Author Comment

ID: 18817834
Thank's, that cleared up a whole lot.
LVL 11

Expert Comment

ID: 18820184
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.


Author Comment

ID: 18820473
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?

LVL 11

Expert Comment

ID: 18822683
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.

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question