vertical-align: bottom

Discussion in 'HTML' started by shank, Oct 2, 2003.

  1. shank

    shank Guest

    How can I get the below text to align on the bottom of the <div>..?

    <div style="height:200px; border-style:solid; border-color:#FF0000;
    border-width:2px; text-align:center; vertical-align:bottom">
    mumbo jumbo
    </div>

    thanks
     
    shank, Oct 2, 2003
    #1
    1. Advertising

  2. shank

    brucie Guest

    In post <zD0fb.38587$>
    shank said...

    > How can I get the below text to align on the bottom of the <div>..?
    >
    > <div style="height:200px; border-style:solid; border-color:#FF0000;
    > border-width:2px; text-align:center; vertical-align:bottom">
    > mumbo jumbo
    > </div>


    <div style="display:table;width:100%;">
    <div style="display:table-cell;... vertical-align:bottom;">
    mumbo jumbo
    </div></div>

    not supported by IE

    div{height:200px;border-style:solid;border-color:#FF0000;border-width:2px;text-align:center;}
    p{top:100%;margin-top:-2em;position:relative;}

    <div><p>mumbo jumbo</p></div>

    IE6, moz1.4 and opera 7.2 but fragile.

    --
    03/October/2003 07:53:29 am
     
    brucie, Oct 2, 2003
    #2
    1. Advertising

  3. shank

    shank Guest

    "brucie" <-html.org> wrote in message
    news:y0hl6x1hehz$...
    > In post <zD0fb.38587$>
    > shank said...
    >
    > > How can I get the below text to align on the bottom of the <div>..?
    > >
    > > <div style="height:200px; border-style:solid; border-color:#FF0000;
    > > border-width:2px; text-align:center; vertical-align:bottom">
    > > mumbo jumbo
    > > </div>

    >
    > <div style="display:table;width:100%;">
    > <div style="display:table-cell;... vertical-align:bottom;">
    > mumbo jumbo
    > </div></div>
    >
    > not supported by IE
    >
    >

    div{height:200px;border-style:solid;border-color:#FF0000;border-width:2px;te
    xt-align:center;}
    > p{top:100%;margin-top:-2em;position:relative;}
    >
    > <div><p>mumbo jumbo</p></div>
    >
    > IE6, moz1.4 and opera 7.2 but fragile.
    >
    > --
    > 03/October/2003 07:53:29 am
    >


    What is the benefit of using display:table and display:table-cell as opposed
    to such using a table? Seems that by the time you get done and compare code,
    there's little difference.
    thanks
     
    shank, Oct 3, 2003
    #3
  4. shank

    brucie Guest

    In post <mS2fb.39174$>
    shank said...

    > What is the benefit of using display:table and display:table-cell as opposed
    > to such using a table?


    html <table>s are for tabular data, the cell content has a
    relationship with other cell content. the CSS table model represents
    the visual layout of a html table, nothing else.

    > Seems that by the time you get done and compare code, there's little
    > difference.


    they're completely different.

    --
    03/October/2003 09:56:21 am
     
    brucie, Oct 3, 2003
    #4
  5. shank

    shank Guest

    "brucie" <-html.org> wrote in message
    news:y0hl6x1hehz$...
    > In post <zD0fb.38587$>
    > shank said...
    >
    > > How can I get the below text to align on the bottom of the <div>..?
    > >
    > > <div style="height:200px; border-style:solid; border-color:#FF0000;
    > > border-width:2px; text-align:center; vertical-align:bottom">
    > > mumbo jumbo
    > > </div>

    >
    > <div style="display:table;width:100%;">
    > <div style="display:table-cell;... vertical-align:bottom;">
    > mumbo jumbo
    > </div></div>
    >
    > not supported by IE
    >
    >

    div{height:200px;border-style:solid;border-color:#FF0000;border-width:2px;te
    xt-align:center;}
    > p{top:100%;margin-top:-2em;position:relative;}
    >
    > <div><p>mumbo jumbo</p></div>
    >
    > IE6, moz1.4 and opera 7.2 but fragile.
    >
    > --
    > 03/October/2003 07:53:29 am
    >


    <div style="display:table; width:300px;">
    <div style="display:table-row; width:100%;">
    <div style="display:table-cell; vertical-align:bottom; height:200px;
    text-align:center; border-style:solid; border-color:#FF0000;
    border-width:2px;">
    mumbo jumbo
    </div>
    </div>
    </div>

    Did I miss something? On my screen the "mumbo jumbo" is still at the top. I
    added the table-row <div> thinking that was the problem.
    thanks!
     
    shank, Oct 3, 2003
    #5
  6. shank

    brucie Guest

    In post <M93fb.39181$>
    shank said...

    > <div style="display:table; width:300px;">
    > <div style="display:table-row; width:100%;">
    > <div style="display:table-cell; vertical-align:bottom; height:200px;
    > text-align:center; border-style:solid; border-color:#FF0000;
    > border-width:2px;">
    > mumbo jumbo
    > </div>
    > </div>
    > </div>
    >
    > Did I miss something? On my screen the "mumbo jumbo" is still at the top. I
    > added the table-row <div> thinking that was the problem.


    table-row is not required. "missing" parts are assumed.

    this:

    div{height:200px;width:100%;display:table;border:1px solid red;text-align:center;}
    p{display:table-cell;vertical-align:bottom;}

    <div><p>mumbo jumbo</p></div>

    looks like this: http://usenet.alt-html.org/screencap332.png [1k]

    it gives the same visual appearance of

    <table width="100%" border="1">
    <tr><td height="200" valign="bottom" align="center">mumbo jumbo</td></tr>
    </table>

    --
    03/October/2003 10:17:33 am
     
    brucie, Oct 3, 2003
    #6
  7. shank

    shank Guest

    "brucie" <-html.org> wrote in message
    news:1maepubvryi5k$...
    > In post <M93fb.39181$>
    > shank said...
    >
    > > <div style="display:table; width:300px;">
    > > <div style="display:table-row; width:100%;">
    > > <div style="display:table-cell; vertical-align:bottom; height:200px;
    > > text-align:center; border-style:solid; border-color:#FF0000;
    > > border-width:2px;">
    > > mumbo jumbo
    > > </div>
    > > </div>
    > > </div>
    > >
    > > Did I miss something? On my screen the "mumbo jumbo" is still at the

    top. I
    > > added the table-row <div> thinking that was the problem.

    >
    > table-row is not required. "missing" parts are assumed.
    >
    > this:
    >
    > div{height:200px;width:100%;display:table;border:1px solid

    red;text-align:center;}
    > p{display:table-cell;vertical-align:bottom;}
    >
    > <div><p>mumbo jumbo</p></div>
    >
    > looks like this: http://usenet.alt-html.org/screencap332.png [1k]
    >
    > it gives the same visual appearance of
    >
    > <table width="100%" border="1">
    > <tr><td height="200" valign="bottom" align="center">mumbo jumbo</td></tr>
    > </table>
    >
    > --
    > 03/October/2003 10:17:33 am
    >


    Please have a look at http://216.119.84.179/test.htm and view source.
    I'm using IE 6.0 and it's still centered at the top.
    What do you see?
    thanks!
     
    shank, Oct 3, 2003
    #7
  8. shank

    rf Guest

    "shank" <> wrote in message
    news:7B3fb.39188$...
    >
    > "brucie" <-html.org> wrote in message
    > news:1maepubvryi5k$...
    > > In post <M93fb.39181$>
    > > shank said...


    > Please have a look at http://216.119.84.179/test.htm and view source.
    > I'm using IE 6.0 and it's still centered at the top.
    > What do you see?
    > thanks!


    Go back and re-read the original post brucie made in this thread. Therein he
    said:

    "not supported by IE".

    Cheers
    Richard.
     
    rf, Oct 3, 2003
    #8
  9. shank

    shank Guest

    "brucie" <-html.org> wrote in message
    news:12bq21myv612t$...
    > In post <7B3fb.39188$>
    > shank said...
    >
    > > Please have a look at http://216.119.84.179/test.htm and view source.
    > > I'm using IE 6.0 and it's still centered at the top.

    >
    > in my first post i said IE didn't support it and supplied a different
    > method which works for IE but it is fragile.
    >
    > --
    > 03/October/2003 10:57:41 am
    >


    sorry about that
    I thought I grabbed the one that was supposed to be good for IE.
    oops!
     
    shank, Oct 3, 2003
    #9
  10. shank

    brucie Guest

    In post <7B3fb.39188$>
    shank said...

    > Please have a look at http://216.119.84.179/test.htm and view source.
    > I'm using IE 6.0 and it's still centered at the top.


    in my first post i said IE didn't support it and supplied a different
    method which works for IE but it is fragile.

    --
    03/October/2003 10:57:41 am
     
    brucie, Oct 3, 2003
    #10
    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. Kay
    Replies:
    2
    Views:
    7,157
  2. Dan
    Replies:
    1
    Views:
    8,373
    ainigma
    Apr 4, 2008
  3. Noozer
    Replies:
    1
    Views:
    7,167
    Carolyn Marenger
    Mar 13, 2006
  4. Cuthbert
    Replies:
    8
    Views:
    435
    Ancient_Hacker
    Sep 13, 2006
  5. BeeRich
    Replies:
    8
    Views:
    1,012
    BeeRich
    Jul 3, 2007
Loading...

Share This Page