how to make >1 spans the same height automatically?

[ziliath]

Hi all,

I've got a row of <SPAN> tags, each of which contains varying
amount of data and therefore each of them has a different height.
And, they have borders added.

My question is, how do I get all of these SPANs to be
the same height, so that the borders line up?

An example:

<SPAN style="border: solid blue 1px; width: 1in;">A<p>b<p>c</SPAN>
<SPAN style="border: solid blue 1px; width: 1in;">A</SPAN>
<SPAN style="border: solid blue 1px; width: 1in;"><big><big>AAA</big></big></SPAN>

Thanks!

 

[Toby A Inkster]

<SPAN style="border: solid blue 1px; width: 1in;">A<p>b<p>c</SPAN>

Illegal. You can't nest paragraphs within spans. Try replacing the spans
with divs.

 

[Sid Ismail]

On 6 May 2004 11:34:24 -0700, (e-mail address removed) (ziliath) wrote:

: Hi all,
:
: I've got a row of <SPAN> tags, each of which contains varying
: amount of data and therefore each of them has a different height.
: And, they have borders added.
:
: My question is, how do I get all of these SPANs to be
: the same height, so that the borders line up?
:
: An example:
:
: <SPAN style="border: solid blue 1px; width: 1in;">A<p>b<p>c</SPAN>
: <SPAN style="border: solid blue 1px; width: 1in;">A</SPAN>
: <SPAN style="border: solid blue 1px; width: 1in;"><big><big>AAA</big></big></SPAN>


Do a table. Easy! It's tabular data, by the sounds of it.

Sid

 

[Neal]

Hi all,

I've got a row of <SPAN> tags, each of which contains varying
amount of data and therefore each of them has a different height.
And, they have borders added.

My question is, how do I get all of these SPANs to be
the same height, so that the borders line up?

An example:

<SPAN style="border: solid blue 1px; width: 1in;">A<p>b<p>c</SPAN>
<SPAN style="border: solid blue 1px; width: 1in;">A</SPAN>
<SPAN style="border: solid blue 1px; width:
1in;"><big><big>AAA</big></big></SPAN>

Where do I start?

The unit "in" is not good for screen. Use perhaps em instead.

span is inline and cannot contain block markup. You're better off with div
instead of span here. You'll need to, say, float them left to make them
appear like spans.

Two bigs in a row won't do much in modern browsers, and besides it's
better to use CSS to control this.

To address your question - it's not so easy. Containing blocks are as big
as the content, and there's no good way to tell the browser "out of all
these divs, find the tallest and make them all that height".

In this case, the only sure way is if it's table data, use a table. If you
can say that the data in the rows all have something in common AND the
data in the columns all have something in common, table markup is
appropriate.

 

[ziliath]

Do a table. Easy! It's tabular data, by the sounds of it.

Indeed it is tabular data. Problem here was,
I just didn't realize that <TD> will accept
a style with border specifications.

Thanks.

 

[Sid Ismail]

On 7 May 2004 06:24:10 -0700, (e-mail address removed) (ziliath) wrote:

: >
: > Do a table. Easy! It's tabular data, by the sounds of it.
:
: Indeed it is tabular data. Problem here was,
: I just didn't realize that <TD> will accept
: a style with border specifications.


You can do more than just border -
http://www.sabf.co.za/results/sawba_pairs.html

Sid