<?xml version="1.0" encoding="UTF-8"?><rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
> <channel><title>Comments on: Vertically align text to bottom within div</title> <atom:link href="https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html/feed" rel="self" type="application/rss+xml" /><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html</link> <description>Tiny bits of bioinformatics, [web-]programming etc</description> <lastBuildDate>Mon, 01 Jan 2024 17:12:20 +0000</lastBuildDate> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>https://wordpress.org/?v=3.8.27</generator> <item><title>By: Bogdan</title><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-104916</link> <dc:creator><![CDATA[Bogdan]]></dc:creator> <pubDate>Thu, 01 Apr 2010 13:04:45 +0000</pubDate> <guid
isPermaLink="false">http://www.bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-104916</guid> <description><![CDATA[Sky,
I believe some contexts and/or CSS attribute combinations make &quot;table-cell&quot; display type unusable; I might have seen something about it at the time of posting.
If you have a fragment of code where &quot;table-cell&quot; doesn&#039;t work - please post it here.]]></description> <content:encoded><![CDATA[<p>Sky,</p><p>I believe some contexts and/or CSS attribute combinations make &#8220;table-cell&#8221; display type unusable; I might have seen something about it at the time of posting.<br
/> If you have a fragment of code where &#8220;table-cell&#8221; doesn&#8217;t work &#8211; please post it here.</p> ]]></content:encoded> </item> <item><title>By: Sky</title><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-104913</link> <dc:creator><![CDATA[Sky]]></dc:creator> <pubDate>Thu, 01 Apr 2010 12:03:21 +0000</pubDate> <guid
isPermaLink="false">http://www.bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-104913</guid> <description><![CDATA[the
&lt;code&gt;div {display:table-cell;vertical-align:middle}&lt;/code&gt;
trick often doesn&#039;t work for some unknown reason]]></description> <content:encoded><![CDATA[<p>the<br
/> <code>div {display:table-cell;vertical-align:middle}</code><br
/> trick often doesn&#8217;t work for some unknown reason</p> ]]></content:encoded> </item> <item><title>By: itilv3</title><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-100963</link> <dc:creator><![CDATA[itilv3]]></dc:creator> <pubDate>Fri, 24 Apr 2009 10:48:34 +0000</pubDate> <guid
isPermaLink="false">http://www.bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-100963</guid> <description><![CDATA[Try this as it may do the trick.  You can apply css styling as appropriate.  Only apply colours, etc. to the DIV.  Only tested and confirmed that is works on IE7 &amp; FF3.  Also solves another problem in that if your text size is increased the table does not overflow as it would if it were a table alone.
[html]&lt;DIV id=&quot;adiv&quot;&gt;
&lt;TABLE WIDTH=&quot;100%&quot; HEIGHT=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
&lt;TR&gt;
&lt;TD valign=&quot;center&quot;&gt;
YOUR TEXT
&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/DIV&gt;[/html]]]></description> <content:encoded><![CDATA[<p>Try this as it may do the trick.  You can apply css styling as appropriate.  Only apply colours, etc. to the DIV.  Only tested and confirmed that is works on IE7 &amp; FF3.  Also solves another problem in that if your text size is increased the table does not overflow as it would if it were a table alone.</p><div
id="ig-sh-1" class="syntax_hilite"><div
class="code"><ol
class="html4strict" style="font-family:monospace;"><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #000000; font-weight: bold;">DIV</span> <span
style="color: #000066;">id</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;adiv&quot;</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #000000; font-weight: bold;">TABLE</span> <span
style="color: #000066;">WIDTH</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;100%&quot;</span> <span
style="color: #000066;">HEIGHT</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;100%&quot;</span> <span
style="color: #000066;">cellpadding</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;0&quot;</span> <span
style="color: #000066;">cellspacing</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;0&quot;</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #000000; font-weight: bold;">TR</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #000000; font-weight: bold;">TD</span> <span
style="color: #000066;">valign</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;center&quot;</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">YOUR TEXT</div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #66cc66;">/</span><span
style="color: #000000; font-weight: bold;">TD</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #66cc66;">/</span><span
style="color: #000000; font-weight: bold;">TR</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #66cc66;">/</span><span
style="color: #000000; font-weight: bold;">TABLE</span>&gt;</span></div></li><li
style="font-weight: normal; vertical-align:top;"><div
style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span
style="color: #009900;">&lt;<span
style="color: #66cc66;">/</span><span
style="color: #000000; font-weight: bold;">DIV</span>&gt;</span></div></li></ol></div></div> ]]></content:encoded> </item> <item><title>By: Bogdan</title><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-78736</link> <dc:creator><![CDATA[Bogdan]]></dc:creator> <pubDate>Mon, 18 Aug 2008 19:27:23 +0000</pubDate> <guid
isPermaLink="false">http://www.bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-78736</guid> <description><![CDATA[Nikola,
Thank you for the grant of rights for publishing.
If we remove everything unrelated to positioning (in FF3 only), we are left with the following CSS code:
&lt;blockquote&gt;
.nav_next a {
display: table-cell;
width: 85px;
text-align: center;
margin-top: -60px;
padding-top: 60px;
top: 60px;
}
&lt;/blockquote&gt;
{ &quot;height&quot; is omitted because of the margin/padding/top attributes of 60px, which renders height=16px irrelevant (at least in FF3); &quot;width&quot;, however, influences the display, so it is left in. &quot;vertical align&quot; also had no effect in FF3, and should have no effect in IE6, so I removed it. }
Let&#039;s have a look at what is going on.
By applying display:table-cell, you make the anchor element behave like a table-cell. This, in turn, enforces proper width of the element, and makes all of margin/padding/top attributes exhibit desirable effects in FF3.
An equivalent, which works just the same in FF3, is to set display:block and add position:relative (which isn&#039;t necessary for FF3 with display:table-cell).
Applying padding-top:60px pushes the anchor&#039;s text to the bottom, and text-align:center centers text. Negative margin-top:-60px looks like elements flow fix (had no effect in my test file with only two elements; might also be IE6-specific).
So the minimal working version might be:
&lt;blockquote&gt;
.nav_next a {
display: table-cell;
width: 85px;
text-align: center;
padding-top: 60px;
position: relative;
top: 60px;
margin-top: -60px;
}
&lt;/blockquote&gt;
with the last three attributes unnecessary for FF3.
Let&#039;s label this solution as &quot;display:table-cell extended&quot; :)]]></description> <content:encoded><![CDATA[<p>Nikola,</p><p>Thank you for the grant of rights for publishing.</p><p>If we remove everything unrelated to positioning (in FF3 only), we are left with the following CSS code:</p><blockquote><p> .nav_next a {<br
/> display: table-cell;<br
/> width: 85px;<br
/> text-align: center;<br
/> margin-top: -60px;<br
/> padding-top: 60px;<br
/> top: 60px;<br
/> }</p></blockquote><p>{ &#8220;height&#8221; is omitted because of the margin/padding/top attributes of 60px, which renders height=16px irrelevant (at least in FF3); &#8220;width&#8221;, however, influences the display, so it is left in. &#8220;vertical align&#8221; also had no effect in FF3, and should have no effect in IE6, so I removed it. }</p><p>Let&#8217;s have a look at what is going on.</p><p>By applying display:table-cell, you make the anchor element behave like a table-cell. This, in turn, enforces proper width of the element, and makes all of margin/padding/top attributes exhibit desirable effects in FF3.</p><p>An equivalent, which works just the same in FF3, is to set display:block and add position:relative (which isn&#8217;t necessary for FF3 with display:table-cell).</p><p>Applying padding-top:60px pushes the anchor&#8217;s text to the bottom, and text-align:center centers text. Negative margin-top:-60px looks like elements flow fix (had no effect in my test file with only two elements; might also be IE6-specific).</p><p>So the minimal working version might be:</p><blockquote><p> .nav_next a {<br
/> display: table-cell;<br
/> width: 85px;<br
/> text-align: center;<br
/> padding-top: 60px;<br
/> position: relative;<br
/> top: 60px;<br
/> margin-top: -60px;<br
/> }</p></blockquote><p>with the last three attributes unnecessary for FF3.</p><p>Let&#8217;s label this solution as &#8220;display:table-cell extended&#8221; <img
src="https://bogdan.org.ua/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" /></p> ]]></content:encoded> </item> <item><title>By: Nikola</title><link>https://bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-78725</link> <dc:creator><![CDATA[Nikola]]></dc:creator> <pubDate>Mon, 18 Aug 2008 11:50:19 +0000</pubDate> <guid
isPermaLink="false">http://www.bogdan.org.ua/2007/02/19/vertically-align-text-to-bottom-within-div.html#comment-78725</guid> <description><![CDATA[try this one and be free to simplify it and publish on your site appropriate version as I&#039;m in a hurry. Works in ff3 ie6. I didn&#039;t tested other browsers.
.nav_next  a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666;
text-decoration: none;
display: table-cell;
height: 16px;
width: 85px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-left-color: #333333;
position: relative;
text-align: center;
float: right;
vertical-align: bottom;
margin-top: -60px;
padding-top: 60px;
top: 60px;
}]]></description> <content:encoded><![CDATA[<p>try this one and be free to simplify it and publish on your site appropriate version as I&#8217;m in a hurry. Works in ff3 ie6. I didn&#8217;t tested other browsers.<br
/> .nav_next  a {<br
/> font-family: Arial, Helvetica, sans-serif;<br
/> font-size: 10px;<br
/> color: #666;<br
/> text-decoration: none;<br
/> display: table-cell;<br
/> height: 16px;<br
/> width: 85px;<br
/> border-right-width: 1px;<br
/> border-left-width: 1px;<br
/> border-right-style: solid;<br
/> border-left-style: solid;<br
/> border-right-color: #333333;<br
/> border-left-color: #333333;<br
/> position: relative;<br
/> text-align: center;<br
/> float: right;<br
/> vertical-align: bottom;<br
/> margin-top: -60px;<br
/> padding-top: 60px;<br
/> top: 60px;<br
/> }</p> ]]></content:encoded> </item> </channel> </rss>