Problem with text aligment and divs

Here is my problem. Let's say I want a div that is 200px high and 50px wide. I want to have text that is aligned to the right, which I can do, but also aligned to the bottom, which I have searched tirelessly for trying to figure out how to do. I want it aligned there so when I type text the current text moves to the line above it. Not aligned at the top where when I enter more text it appears below the current text. This is because some pages will have more text than other. I have four main boxes to my layout and all the text/elements align where the four corners meet. Please help

 

vertical-align: bottom; should work

 

I wish it did. It doesn't do anything though. I thought vertical-align only worked with aligning an image with text. I just want the text aligned at the bottom. I've tried many times and read everywhere else that that doesn't work with just text.

 

I think you want the following, it works like a charm.

CSS

.container {
	position: relative;
	border: 1px solid #000;
	height: 200px;
	width: 150px;
}
.bottom {
	position: absolute;
	bottom: 0;
}

Code (markup):

HTML

<div class="container">
	<div class="bottom">
		<p>some text goes here</p>
		<p>some text goes here</p>
	</div>
</div>

Code (markup):

Enjoy...

 

Thanks! Looks like it's doing what I want. Awesome.

 

HELP! It works fine for Firefox, but in IE it looks funky. Here is a screenshot of what happens. The div class that is absolutely positioned at 0 bottom is called "bottomrighttext" and is at the bottom of the css. I've also attached screenshots of what is happening as well as the layout in Dreamweaver so you can see the divs. Thanks.




Here is my code, which i know can be made more efficient but should be fine:

body {
	background-color: #FFFDF4;
	margin-top: 50px;
}
a:link {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 35px;
	text-decoration: none;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 35px;
	text-decoration: none;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 35px;
	text-decoration: none;
	background-color: #3C6C55;
}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 35px;
	text-decoration: none;
}
#container {
	height: 600px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(background.gif);
}
#side {
	width: 299px;
	height: 399px;
	float: left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}
#main {
	float: right;
	height: 399px;
	width: 599px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
}
#logo {
	height: 199px;
	width: 299px;
	background-color: #559B7A;
	position: relative;
	float: left;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #447D62;
	border-left-color: #447D62;
}
#links {
	height: 199px;
	width: 599px;
	background-color: #60A88D;
	position: relative;
	float: right;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #447D62;
	border-bottom-color: #447D62;
}
#sidebox {
	height: 300px;
	width: 250px;
	text-align: right;
	position: relative;
	top: 25px;
	left: 25px;
}
#mainbox {
	position: relative;
	height: 300px;
	width: 550px;
	left: 25px;
	top: 25px;
}
#logobox {
	height: 150px;
	width: 250px;
	margin-top: 25px;
	margin-left: 25px;
}
#linksbox {
	height: 150px;
	width: 550px;
	margin-top: 25px;
	margin-left: 25px;
}
.maintitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #559B7A;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-align: left;
	font-weight: bold;
}
.secondtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #559B7A;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: left;
}
.sidetext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.maintext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
	left: 25px;
}
.logotext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	left: 25px;
}
.linktext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 35px;
}
.bottomrighttext {
	position: absolute;
	width: 250px;
	bottom: 0px;
}
.bottomlefttext {
	position: absolute;
	width: 550px;
	bottom: 0px;
}

Code (markup):

and here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graphic Design Specialists</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="side">
<div id="sidebox">
<div class="bottomrighttext"> <span class="sidetext">Welcome to the site!  I'm glad to be able to show you everything I've been working on.  Take a look around and see if there's anything you like.  Just contact me for custom business cards, logos, or anything else you'd like.  Thanks again! <br />
    <br />
- J.T. Shaver<br />
</span> </div>
</div>
  </div>
	<div id="main">
<div id="mainbox">
<div class="bottomlefttext"><span class="maintitle">Graphic Design Specialists</span>
<br />
<span class="secondtitle">online portfolio</span><br />
</div>
</div>
  </div>
    <div id="logo">
<div id="logobox" align="right">
  <img src="gdslogo.jpg" alt="Graphic Design Specialists" width="125" height="99" /></div>
  </div>
	<div id="links">
<div id="linksbox" class="linkstext">
<span class="linktext"><a href="index.php">home</a> <a href="biography.php">Biography</a> <a href="portfolio.php">Portfolio</a> <a href="contact.php">Contact</a> <a href="oders.php">Orders</a></span></div>
	</div>
</div>
</body>
</html>

HTML:

 

Hmmm, I would've written it completely differently... but that's okay, everyone does stuff differently.

Mainly, I would leave the right side normal and float the left part instead... and give the right part the needed left margin to push the main content out of the way.
But in the meantime, I think maybe all you need is to tell IE how far from the left you want the bottomlefttext. You've stated 0 from bottom, but nothing from left. Firefox is guessing correctly where to start. IE is apparently using something else as a reference point (even though you've got "position: relative" in its parent).

I doubt I will get time to try my own hand at this today as I will be sitting at the relatives' house (x-mas) but I think I could half both the html and the css. Dreamweaver does has its thing about wrapping divs. Maybe if you're still having trouble tomorrow... I think this problem is something to do with how IE is looking at the floats... and also, lots of absolute positioning like you have makes your page fragile and brittle-- any little thing can break it, like someone enlarging the fonts a bit or a browser being a little bit off, or different resolutions.

Anyway, have a relaxed holiday if you live in a country where this is holiday-time. Cheers, pOes

 

Thanks. What you told me worked. I know the code isn't very efficient at all but I'm no css genius. I just started using it about 2 weeks ago so I'm sure I'll mess up a lot. If you'd be interested in helping me cut my code down I'd surely appreciate it but don't waste your time if you've got better things to do. Thanks agian.

 

Without seeing your full html (meaning, I dunno how much content there is on the other pages, PLUS I suspect you will put some bit pretty logo above the Graphic Design text), I won't try re-writing it, but I can shorten your CSS right here and now, and it will be the same. The only actual difference I've added is the universal reset at the top, which may make your page look different because it removes all padding and margins... better to set every browser at 0 and re-add the margins and padding you really want (every browser has a different amount of defaul padding and margins, so you can never really place stuff exactly where you want).

I found some classes in the CSS that aren't in the HTML so not sure what's going on there. Second, you have a div wrapped around an image-- not needed. You can float it or align it left with css, just give it an id or a class.

Something like:

* {
  margin: 0;
  padding: 0;
}

img {
  border: none;
}

body {
  background-color: #fffdf4;
  margin-top: 50px;
}
a {
  font: bold 12px/14px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  word-spacing: 35px;
  text-decoration: none;
}

a:hover {
  background-color: #3c6c55;
}

#container {
  height: 600px;
  width: 900px;
  margin: 0 auto;
  background-image: url(background.gif);
  font: bold 10px/12px Verdana, Arial, Helvetica, sans-serif;
  color: #559b7a;
  text-transform: uppercase;
  text-align: left;
}

#side {
  width: 299px;
  height: 399px;
  float: left;
  border: 1px solid #ccc;
  border-right: 0;
  border-bottom: 0;
}

#main {
  float: right;
  height: 399px;
  width: 599px;
  border: 1px solid #ccc;
  border-left: 0;
  border-bottom: 0;
}

#logo, #links {
  height: 199px;
  position: relative;
  border: 1px solid #447d62;
  border-top: 0;
}
	#logo {
  	  width: 299px;
  	  background-color: #559b7a;
  	  float: left;
  	  border-top: 0;
	}
	#links {
  	  width: 599px;
  	  background-color: #60a88d;
  	  float: right;
  	  border-left: 0;
	}

#sidebox, #mainbox {
  height: 300px;
  width: 250px;
  text-align: right;
  position: relative;
  top: 25px;
  left: 25px;
}
	#sidebox {
  	  width: 250px;
  	  text-align: right;
	}
	#mainbox {
  	  width: 550px;
	}

#logobox, linksbox {
  height: 150px;
  margin: 25px 0 0 25px;
}
	#logobox {
  	  width: 250px;
	}
	#linksbox {
  	  width: 550px;
	}

#mainbox span.maintitle {
  font-size: 20px;
  letter-spacing: 4px;
}

#mainbox span.secondtitle {
  font-size: 14px;
  letter-spacing: 2px;
}

.maintext, .logotext {
  left: 25px;
}
	.logotext {
  	  text-align: right;
	}

.linktext {
  color: #fff;
  letter-spacing: 1px;
  word-spacing: 35px;
}

.bottomrighttext, #bottomlefttext {
  position: absolute;
  bottom: 0px;
}
	.bottomrighttext {
	  width: 250px;
	}
	.bottomlefttext {
	  width: 550px;
}

Code (markup):

Because I couldn't always find the classes in the HTML, there may be some inheritance stuff I'm not expecting. For instance, I set most of the font info in #container. I'm not 100% sure the classes will override it when you need it to-- if not, you should do like I did with .maintest, where I also named a parent's id (more weight).

 

Thanks! I guess I'm not sure when to use ID's or when to use classes. If you have any tutorial links you know of about that that'd be helpful. I guess i just need to read a beginning to end tutorial to learn all about it rather than just do it blindly and hope it works. Thanks again.

 

The best absolute beginners' tutorial I've seen is the book Build Your Own Web Site Using HTML and CSS by Ian Lloyd. Starts right out with "What's html?" and ends up with you building the site www.bubbleunder.com (which is online so you can see it too). You can probably get it at the library for free-- just check the online link in the book for errors which have been corrected after printing.

The general rule of thumb is, if there's only one of it, use an ID and if there are more than one of it, use a class. This is only a rule of thumb-- I've used classes in menus for special Sliding Doors techniques (and I used them because the original template I learned from was written by deathshadow for someone on this forum and he had a class for each button in the menu... guess it didn't matter there).

One thing to watch out for is "classitis" where someone does something like this:

<div id="menu">
  <ul>
    <li class="glow"><a href="#">Foo</a></li>
    <li class="glow"><a href="#">Bar</a></li>
    <li class="glow"><a href="#">A Bear!</a></li>
  </ul>
</div>

Code (markup):

See, there's no need for the wrapping div (because ul is a block itself), and the classes are all the same-- so, better to give an id to the ul and refer to the li's in the CSS.

<ul id="mainmenu">
  <li><a href="#">Foo</a></li>
  <li><a href="#">Bar</a></li>
  <li><a href="#">A Bear!</a></li>
</ul>

Code (markup):

And in the CSS you can refer to them as
#mainmenu li {
stuff...
}
instead of the classes.

But you learn this stuff over time, with books, in forums, here, etc.