vertical-align: bottom

[shank]

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

 

[brucie]

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.

 

[shank]

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

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

 

[brucie]

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.

 

[shank]

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

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

 

[brucie]

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

 

[shank]

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

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!

 

[rf]

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.

 

[shank]

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

sorry about that
I thought I grabbed the one that was supposed to be good for IE.
oops!

 

[brucie]

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.