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

  • Posts

    • How do I connect dual monitor to my PC (No Graphics Card)

      By Mindovermaster · Posted

      #1 DP and #8 HDMI, you can connect both monitors to your motherboard. It's not just one or the other, you can use both at the same time.
    • Every ad you see on Meta platforms could be AI-generated by 2026

      By RejZoR · Posted

      So, I will see exactly ZERO ads, because I f**ked off the stupid Facebook/Meta ages ago. I don't miss any of it at all.
    • Thunderbird 139.0.1

      By Copernic · Posted

      Thunderbird 139.0.1 by Razvan Serea Thunderbird is a free, open-source, cross-platform application for managing email and news feeds. It is a local (rather than a web-based) email application that is powerful yet easy-to-use. Thunderbird is clean and elegant by default, but easily customizable to match your workflow and visual preferences. It is loaded with unique and powerful features. Thunderbird is developed, tested, translated and supported by the folks at Mozilla Corporation and by a group of dedicated volunteers. Thunderbird gives you control and ownership over your email. There are lots of add-ons available for Thunderbird that enable you to extend and customize your email experience. Thunderbird gives you IMAP/POP support, a built-in RSS reader, support for HTML mail, powerful quick search, saved search folders, advanced message filtering, message grouping, labels, return receipts, smart address book LDAP address completion, import tools, and the ability to manage multiple e-mail and newsgroup accounts. Thunderbird 139.0.1 fixes: Thunderbird could crash when copying a local folder to IMAP Upgrade to 139.0 incorrectly switched Table View to Cards View Download: Thunderbird 139.0.1 for Windows (EN/US) | 32-bit | ~70.0 MB (Open Source) Download: Thunderbird 139.0.1 for Linux (EN/US) | 74.7 MB Download: Thunderbird 139.0.1 for Mac OS (EN/US) | 127.0 MB Download: Thunderbird 139.0.1 in other languages View: Thunderbird Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • SteamOS falls to lowest adoption level in years as Steam on Linux use rises

      By Brandon H · Posted

      It's both. Bazzite forked the game mode so it's not just simply running big picture mode like on full desktop.
    • The official Funny Pictures thread

      By Steffan · Posted

  • Recent Achievements

    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • Week One Done
      lilred1938 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      142
    2. 2
      Xenon
      130
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      97
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!