css help needed div/span

Discussion in 'HTML' started by Chris Kettenbach, Dec 29, 2004.

  1. 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
    Chris Kettenbach, Dec 29, 2004
    #1
    1. Advertising

  2. Chris Kettenbach

    Jim Michaels Guest

    "Chris Kettenbach" <> wrote in message
    news:...
    > 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
    > 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, Feb 4, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    546
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,757
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    487
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    277
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    471
    Wang, Jay
    May 25, 2004
Loading...

Share This Page