css help needed div/span

[Chris Kettenbach]

Hi Everybody,

I have run in to a small problem. I am working in a table cell. I want to
put two elements inline. This first is a large font single charcter 1. I
want this to be like 30px wide font size 36pix. Immeditely following this
element I want another inline element on the same line that will have a
couple lines of text in a much smaller and different color font. I can
accomplish pretty much what I want with a style rule something like this.

..bignum{background-color:crimson;
color:cornsilk;
font-family:tahoma;
font-size:36px;
font-weight:bold;
text-align:center;
width:30px;
float:left;
}

My problem is that this element's height does not grow to the height of the
next inline element? As more text is added to the element I would like the
number box to grow accordingly, just in height not font effectively making
this element the same height of the adjacent element. Does anyone know the
solution? I am trying to avoid inserting a table but the effect would be
like a single row table with 2 columns and the cell heights are the same
width10% & width90% with different background colors. Thanks Everybody.

Chris

 

[Jim Michaels]

Hi Everybody,

I have run in to a small problem. I am working in a table cell. I want to
put two elements inline. This first is a large font single charcter 1. I
want this to be like 30px wide font size 36pix. Immeditely following this
element I want another inline element on the same line that will have a
couple lines of text in a much smaller and different color font. I can
accomplish pretty much what I want with a style rule something like this.

.bignum{background-color:crimson;
color:cornsilk;
font-family:tahoma;
font-size:36px;
font-weight:bold;
text-align:center;
width:30px;
float:left;
}

My problem is that this element's height does not grow to the height of
the
next inline element?

before you want the numbers to go down in size. now you want them to go up?

As more text is added to the element I would like the

number box to grow accordingly, just in height not font effectively making
this element the same height of the adjacent element. Does anyone know
the
solution?

tried nested spans, one as a container. the background colors showed me that
the inner spans differed in height. I don't see how you are going to do
it. if you are worried about the table causing a line break, try
float:left.
I don't know how else you are going to do it. table seems to work best.

<span><span style="background-color:#3366CC;font-size:36px;">1</span><span
style="background-color:#CC99FF;font-size:48px;">2</span></span>
<table border=0 cellspacing=0 cellpadding=0><tr><td
style="background-color:#3366CC;font-size:36px;">1</td><td
style="background-color:#CC99FF;font-size:48px;">2</td></tr></table>

I am trying to avoid inserting a table but the effect would be