• 0

[CSS] DIV not aligning text to bottom


Question

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

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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • AMD releases new Windows 10 and 11 chipset driver for Ryzen processors by Taras Buria Following a major firmware update for a TPM-Pluton security flaw, AMD has a new chipset driver for all of its supported Ryzen platforms and processors. Version 7.06.02.123 is now available for download, and it adds unnamed bug fixes and an important addition to the AMD PPM Provisioning File driver, which improves the security of the component. The security update in question is CETCOMPAT support for the AMD PPM Provisioning File driver. CET or Control-flow Enforcement Technology (CET) was introduced for Windows 10 versions 20H1 and 20H2 in early 2021. In a nutshell, it is an Intel-developed protection system that prevents malware from changing memory addresses (Shadow Stack) or redirecting programs to malicious code by ensuring they use only approved, safe locations (Indirect Branch Tracking). AMD brought CETCOMPACT support to parts of its Ryzen chipset driver suite (the driver you download and install is a set of different drivers serving different purposes that AMD lets you select on the first screen) in October 2024. Now, with driver 7.06.02.123, CET compatibility has been added to the AMD PPM Provisioning File driver, which is responsible for core parking and power management. Here is the list of updated drivers in today's release: Driver Version (Windows 10) Version (Windows 11) Changelog AMD PPM Provisioning File Driver 8.0.0.53 8.0.0.53 CETCOMPAT support is added AMD PMF-6000 Series Driver 24.0.6.0 24.0.6.0 Bug fixes AMD S0i3 Filter Driver 4.5.0.1020 4.5.0.1020 AMD 3D V-Cache Performance Optimizer Driver 1.0.0.11 1.0.0.11 AMD PMF-7040 Series Driver 24.2.6.0 24.2.6.0 AMD PMF-8000Series Driver 25.5.25.0 25.5.25.0 AMD PMF Ryzen AI 300 Series Driver 1 Not Applicable 25.6.28.0 AMD's latest Ryzen chipset driver supports 64-bit Windows 10 and 11 systems with the following motherboards: A-Series B-Series X-Series Threadripper AMD A320 AMD A520 AMD B350 AMD B450 AMD B550 AMD B650 / B650E AMD X370 AMD X470 AMD X570 AMD X670 / X670E AMD X870 / X870E AMD TRX40 AMD TRX50 AMD WRX80 AMD WRX90 You can download AMD Ryzen Chipset Driver 7.0.6.02.123 from the official support website. Full release notes and additional information is available on the same page.
    • I never got to experience BOB Hello even now because gaming laptops I bought always omitted the IR camera. And the standalone cameras for BOB Hello are super expensive
    • I wonder what $99 Chinese cellphone this phone will be based on. Whoever is dumb enough to buy the phone and/or get this service deserves everything they get.
    • Trump is a low-class guy who thinks painting everything in gold makes him look fancy.
    • Don't forget second season pass, that's not part of the superdeluxe edition.
  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      642
    2. 2
      ATLien_0
      274
    3. 3
      +FloatingFatMan
      174
    4. 4
      Michael Scrip
      156
    5. 5
      Steven P.
      138
  • Tell a friend

    Love Neowin? Tell a friend!