$phinX Posted February 11, 2006 Share Posted February 11, 2006 (edited) Ive got the following CSS code: #pageWrapper{ margin: 0 0 0 0; padding: 0 0 0 0; width: 770px; background: #000000 url(../images/bg_grass.jpg) bottom left no-repeat; text-align: left; } #footer{ font-weight: bold; height: 200px; vertical-align:bottom; } And the following HTML code: <html> <head> <link href="../css/ftballstyle.css" type="text/css" rel="stylesheet"> </head> <body> <form id="Form1" method="post" runat="server"> <div id="pageWrapper"> <div id="footer"><p>Hello World</p></div> </div> </form> </body> </html> I expected this to show a 200px height DIV with the text 'Hello World' in the BOTTOM of the DIV. But instead, the 'Hello World' text appears at the top of the DIV. Can someone help here... i dont see why this is happening. (FYI using IE6). Edited February 12, 2006 by Joel Link to comment https://www.neowin.net/forum/topic/431345-css-div-not-aligning-text-to-bottom/ Share on other sites More sharing options...
0 CDog Posted February 11, 2006 Share Posted February 11, 2006 [edit] so sorry I missread your code completely Try baseline rather than bottom - or create a new id for that paragraph and put the veritical-align: bottom in there as this aligns the paragraph element within its parent element. Link to comment https://www.neowin.net/forum/topic/431345-css-div-not-aligning-text-to-bottom/#findComment-587183006 Share on other sites More sharing options...
0 briley Posted February 11, 2006 Share Posted February 11, 2006 vertical-align in CSS is a bit confusing... For your situation though, I think it may work better if you did the following: Add position:relative to the CSS for #pageWrapper (this is to keep the absolutely positioned footer inside this DIV) Add position:absolute; bottom:0px; left:0px to the CSS for #footer That should achieve the effect I think you're going for... it absolutely positions #footer in the bottom left hand corner of #pageWrapper Alternatively, you could just put the #footer DIV below the #pageWrapper DIV in the HTML, that way it would always display at the bottom of the page. Link to comment https://www.neowin.net/forum/topic/431345-css-div-not-aligning-text-to-bottom/#findComment-587183048 Share on other sites More sharing options...
0 $phinX Posted February 11, 2006 Author Share Posted February 11, 2006 (edited) That kinda worked... but i think ite being effected by other divs... the end result i actually want is this (see attachment) I cant get this to display. Could someone advise what positioning i would need in these divs... #pageWrapper (#footer is contained in this) #footer (the footer contains #footerleft and #footerright) #footerleft (text aligned to the left in the footer) #footerright (text aligned to the right in the footer) In tables i would just do: <table> <tr> <td> <table> <tr> <td align=left>Text to align left</td> <td align=right>Text to align right</td> </tr> </table> </td> </tr> </table> Edited February 12, 2006 by Joel Link to comment https://www.neowin.net/forum/topic/431345-css-div-not-aligning-text-to-bottom/#findComment-587183358 Share on other sites More sharing options...
Question
$phinX
Ive got the following CSS code:
#pageWrapper{ margin: 0 0 0 0; padding: 0 0 0 0; width: 770px; background: #000000 url(../images/bg_grass.jpg) bottom left no-repeat; text-align: left; } #footer{ font-weight: bold; height: 200px; vertical-align:bottom; }And the following HTML code:
<html> <head> <link href="../css/ftballstyle.css" type="text/css" rel="stylesheet"> </head> <body> <form id="Form1" method="post" runat="server"> <div id="pageWrapper"> <div id="footer"><p>Hello World</p></div> </div> </form> </body> </html>I expected this to show a 200px height DIV with the text 'Hello World' in the BOTTOM of the DIV. But instead, the 'Hello World' text appears at the top of the DIV.
Can someone help here... i dont see why this is happening. (FYI using IE6).
Edited by JoelLink to comment
https://www.neowin.net/forum/topic/431345-css-div-not-aligning-text-to-bottom/Share on other sites
3 answers to this question
Recommended Posts