• 0

[CSS] DIV not aligning text to bottom

Asked by $phinX,

 Share

Question

Rising Star

$phinX

Posted
Posted (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 by Joel
Link 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

  • 0
Collaborator

briley

Posted
Posted

vertical-align in CSS is a bit confusing...

For your situation though, I think it may work better if you did the following:

  1. Add position:relative to the CSS for #pageWrapper (this is to keep the absolutely positioned footer inside this DIV)
  2. 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.

  • 0
Rising Star

$phinX

Posted
  • Author
Posted (edited)

That kinda worked... but i think ite being effected by other divs... the end result i actually want is this (see attachment) post-90716-1139675654.gif

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 by Joel
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.