size a inline component

I tried to build a "form" layout without using table like this

http://www.coolshare.com/temp/images/css.jpg

In order to get the layout, I need to set the light blue area at each
line to a fix size so that
I can align the label of each field to against the text field (kind of
center alignment) even in
case the size of text field vary. That is, with the label area (blue
area) size fixed, I can
right alight label text and left aligh the input text field.

The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.

My question is:

How can I have a inline area width fixed?

thanks

mark

On 2006-11-05, Jim <js_ajax (AT) hotmail (DOT) com> wrote:

I tried to build a "form" layout without using table like this

http://www.coolshare.com/temp/images/css.jpg

In order to get the layout, I need to set the light blue area at each
line to a fix size so that
I can align the label of each field to against the text field (kind of
center alignment) even in
case the size of text field vary. That is, with the label area (blue
area) size fixed, I can
right alight label text and left aligh the input text field.

The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.

My question is:

How can I have a inline area width fixed?

Ideally with display: inline-block, but that's not supported by Firefox,
which leaves floats as the closest things to inline elements that can
have widths set on them.

How can I have a inline area width fixed?

Ideally with display: inline-block, but that's not supported by Firefox,
which leaves floats as the closest things to inline elements that can
have widths set on them.

Firefox has -moz-inline-box display type. This display type is not
fully debugged yet, but for simple usage like here it's fine. So it
could be:

display: inline-block; /* for everyone */
display: -moz-inline-box; /* for Gecko */

I just don't see a need here for inline blocks: floating block elements
do it better and more reliably IMHO.