• 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

    • Intel is shutting down Clear Linux OS

      By ThaCrip · Posted

      Yeah, I totally get your point, which is possible it could happen. I just hope there is a few people around him who are similar to where if they took over things would run pretty much the same. if not, then yeah, it could start to decline rapidly etc. but I figure something that's been around for a longer period of time with a decent backing, and probably more users than most Linux distro's (which I would 'imagine' Mint is one of the more used Linux desktop distro's by volume of people who use it), is less likely to just disappear. but like you said, nothing is guaranteed. but I do think you are probably right in that Clem is probably the core of what keeps Mint, Mint. I like how it tends to stay pretty much the same with some slight tweaks here and there (but is largely the same) instead of that crap some people go for with change for the sake of change trying to create a overly fancy interface and other unnecessary stuff etc. I also feel Mint keeps a nice balance of things out-of-the-box where it's not too bloated, nor too striped down. p.s. but I see Mint as a better Ubuntu basically. but I get your point like if it was more of a really serious choice of needing a 'safe bet' to use long term, then yeah something like official Ubuntu would be one of the better choices for sure given what you said with it being backed by an actual company which makes it a safer bet than Mint which is smaller and 'could' potentially be more fragile.
    • KDE Plasma finally gets rounded bottom window corners

      By adrynalyne · Posted

      It’s in development so hopefully it’s improved upon before release.
    • Everything we know about the Google Pixel 10 series so far

      By Son_Of_Dad · Posted

      For the 10th iteration they could have bothered with some design changes rather than just carrying over the 9's
    • Astonishing new tech could kill headphones forever as it bends sound right into ears

      By Slugsie · Posted

      So this requires hardware to be setup in the area you want to listen to music in? And it requires hardware for each user? So useless for me when I'm out walking my dog? Or when I'm at the gym and want to listen to my podcasts rather than the music the gym is broadcasting? Heck, will it even work in my own home and allow me to walk around from room to room, or even within a room? Yeah, these won't be replacing headphones anytime soon.
    • Politically funny images of the World

      By Michael Scrip · Posted

  • Recent Achievements

    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
    • Explorer
      cekicen went up a rank
      Explorer

  • Popular Contributors

    1. 1
      +primortal
      504
    2. 2
      ATLien_0
      211
    3. 3
      Michael Scrip
      200
    4. 4
      Xenon
      147
    5. 5
      +FloatingFatMan
      122
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!