«

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

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" <> 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

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" <> 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!

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:1 px 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" <> 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:1 px 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" <> wrote in message
news:7B3fb.39188$ om...
>
> "brucie" <> 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.

"brucie" <> 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!

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