Positioning in a container on a page with auto-margins?

I'm trying to figure out how to get text to the upper right and lower right corners of it's container. I've tried absolute positioning, and that makes the object relative to the page it's self, no the wrapper with auto-margins on either side.

Vertical align doesn't help either, so while I can set the text to the right, I can't set it to the bottom.

I'm currently experimenting with my code over at http://dracsplace.com/beta/

 

Josh,

You need to use html syntax with an html DTD, and xhtml syntax with an xhtml DTD. In this, you have an html DTD and xhtml syntax. Always validate your markup as you go. Don't let bad markup get past a save.

There is no sane reason to use a transitional DTD onn a new document. You're not transitioning from anything, and there is no reason to use deprecated elements or attributes.

And finally, ask about what you're trying to accomplish, not about what you've decided is the solution. Looking at your document, I have no clue what you're attempting.

cheers,

gary

 

*wince* ouch. Yes. I did flub that up. And yes, there is a sane reason for using transitional. That reason is that my boss has me include a link from our home account on every page I make. That single line of code has a depreciated attribute I have not been able to convince him to get rid of. Thus, all pages I make must be transitional.

 

Okay, I fixed my doctype scewup.

I have an auto-margined page. I want 2 ULs to be oriented to the upper right, and lower right of a banner, on top of the banner, that will be centered on the page, and of fixed width (due to it being an image banner). I am currently planning on having said banner be the background image for a container.

 

Okay. I've been looking at different methods, and I've gotten everything over to the right, and I can get the second list to the bottom using fixed pixel margins, but that depends on the text being a certain size. This method will blow up if someone changes the text size in their browser, and I'm trying to figure out how to keep the page looking alright when people use accessibility options in their browsers.

 

Have you considered

#head {
  position: relative;
	width: 772px;
	height: 150px;
	margin: 0 auto;
	background: #FFEFD5;
  }

ul.headbot {
  position: absolute;
  bottom: 0;
  right: 0;
  }

Code (markup):

cheers,

gary

 

I tried that exact same set of code before, except that I didn't put the position: relative in the head section. I just tested, and that made the difference!

Thanks again for your help Gary. Sorry to tax your time so.

 

Don't worry about taking my time. I don't answer if the question doesn't interest me or if the poster has a demonstrated shortage of clue.

cheers,

gary

 

Heh. Thanks Gary. I really am trying to pull my skill up by the boot straps here.