Aligning Text to bottom of div

Here is a link to the page as I have it now. This version is not CSS, but pure HTML with tables. You can see at the top how the text should be in the header.

http://www.russellsdesigns.com

I dont see any text outside the header. Maybe you can tell us exactly what text you're referring too. But right now before you do anything else, get your code to validate.

It's the text inside of the header that I am trying to get to align to the bottom. The "We cover all your graphic design needs" part that is inside of the header div.

I know my code for my old site doesn't validate correctly, which is why I'm trying to learn CSS to make sure everything is fine.

you have text "web design | print media..." at the bottom. where is that text supposed to be? The other text is directly above it. Both lines of text are inside the div, and positioned at the bottom in my browser.

Everyone codes a little differently.

I generally develop two stylesheets:

with

html>body #master_container
{
margin: 0px auto;
width:1013px;
}

And the second for older IE browsers.

which is just
#master_container or .master_container / what have you.

My solution would be as follows.

html>body .headtext
{
position:absolute;
margin: 0 0 0 0;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}

Margin property is your movement. It consists of 4 numbers.

so margin:10px 0 0 100px; moves it 10 pixels down and 100 pixels to the right. So you customize those numbers. Negative values can even push it out of the container.

This is sloppy and incorrect. With absolute positioning, you need to specify top or bottom and left or right values for placement, not margin.

I appreciate your comments and really am looking to improve my strategies.

I would appreciate it if you could elaborate your point.

Using that method I can control exact positioning I can change the value to 5px 0 0 10px; in the style sheet hit save and refresh and watch it move exactly five pixels down and ten right.

I understand there are many ways to do things.

What is the error? I would like to know. I understand you can do left:20px; right:50px and what have you. I think it is just easier to control the entire thing with one declaration and 4 numbers.

ill let w3c explain it.

"The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties."

I'm testing it in Firefox and IE, but in both the text is showing at the top of the div for me. The link I provided is my old site, with no CSS, but just how it should look like. I'll upload the new CSS site so they can be compared side by side, and see if it's just something on my end not positioning the text right. Thank you for the help so far though, I do appreciate it.

I appreciate the note and will take it into consideration.

I am specifying the size of the container by setting it's width and height. And moving the element relative to that container.

I am not seeing that the method is flawed.

I like to do it this way. Because I can set a series of container elements and specify their size. And either flow the text/content down the container. Or/and also position it manually relative specifically to that container.

I generally do not place every last element that way. But if it is a single navigation menu in a header. It sure is really easy to put the entire thing exactly where you want it.

abbreviated sample.

html>body #master_container
{
margin: 0px auto;
width:1013px;
}

html>body .header
{
width: 1013px;
height: 170px;
margin: -5px 0 0 0;
background-image:url(images/header_middle.gif);
background-repeat:no-repeat;
}

html>body .links
{
z-index:200;
position:absolute;
margin: 15px 0 0 500px;
}

Bro:

Try this and see what happens.

#header{
background-image: url(images/gradient_BG_03.jpg);
height: 100px;
width: SPECIFYpx;
background-repeat: repeat-x;
border: 1px #4D4D4D solid;
padding-right: 5px;
padding-bottom: 0em;
}

p.headtext {
position:absolute; (This says this element is positioned absolutely in relation to the width and height of # header.)
margin: 0 0 0 0; (This is top left) margin: 10px 0 0 0; (Drops Element 10px.) margin: 0 0 0 100px; (Moves the element 100px to the right.)
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}

I can promise you that is valid working CSS code.

Untitled Document

body
{
text-align: center;
background-color: #000000;}

#container {
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
}

#header{
height: 100px;
background-image:black;
background-repeat: repeat-x;
border: 1px #4D4D4D solid;
padding-right: 5px;
padding-bottom: 0em;
}

#logo {
background-image: url(images/Logo_03.jpg);
background-repeat: no-repeat;
width: 150px;
height: 100px;
float: left;}

.headtext {
position:absolute;
margin: 2px 0 0 410px;
overflow:hidden;
height:100px;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 8px;
}

a:link {}

a:visited {}

a:hover {}

a:active {}

I can control the placement of this entire block of text by editing the bold propertyp.headtext {
position:absolute;
margin: 20px 0 0 220px;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 8px;
}