Invision Power Services > Text Aligning With CSS

Invision Power Services > Community Forums > Community Web Design and Coding

HatTer

Apr 6 2005, 09:00 PM

What attributes would i have to give to a <div> in order for the text within it to be displayed in the bottom-right corner of the <div>?

Would I have to give the text any special attributes?

Thanks.

IAIHMB

Apr 6 2005, 09:43 PM

Well, you cannot have teh text aligned to the bottom without putting it in a block level element, such as a paragragh. So, something like this shold work:

HTML:

CODE

<div class="div">
<p>This text will be aligned to the bottom right hand side of the containing divider.
</p>
</div>

CSS:

CODE

.div {
height: 500px;
text-align: right;
width: 500px;
}

.div p {
vertical-align: bottom;
}

Edit: Don't use "div" as your class though, that might interfere with all dividers containing a paragraph.

FormulaC

Apr 6 2005, 09:44 PM

beaten to it

HatTer

Apr 7 2005, 01:56 AM

I've tried what you said and the text doesn't move to the bottom of the cell. Yet it does align to the right.

The same thing happens in both Firefox and IE, except in Firefox the <p> has a small amount of space above it, regardless of the 'vertical-align' attribute.

This is the exact code that I'm using:

HTML:

CODE

CSS:

CODE

.header_login_cell {
height: 150px;
width: 600px;
float: right;
background-image: url('images/header7.gif');
background-repeat: no-repeat;
background-position: top right;
text-align: right;
}

.header_login_cell p {
vertical-align: bottom;
}

What could be wrong

IAIHMB

Apr 7 2005, 02:08 AM

I tested it before I posted, so I would slim down the chances of looking like an ass. Depending on the content, you might have to change the value of the vertical align property to "text-bottom" as apposed to "bottom". Can you provide a link?

HatTer

Apr 7 2005, 02:28 AM

The page:

http://shredcopter.bucketofglass.com/halo/index2.php

The stylesheet:

http://shredcopter.bucketofglass.com/halo/style3.css

Chad

Apr 7 2005, 02:31 AM

Well, I can rectify the space problem for you.

Add "margin:0px;"

CODE

.header_login_cell p {
vertical-align: bottom;margin:0px;
}

Might update later to help with the alignment issue; if I figure it out.

Chad

IAIHMB

Apr 7 2005, 02:31 AM

I'm testing it again, give me a few minutes. I've been reading all day, to much thinking is bad, I probably mucked up somewheres.

Edit: This is strange, it's taking longer than I expected. I'm not getting up until I figure it out, so your question will be answered, sooner or later.

HatTer

Apr 7 2005, 03:27 AM

QUOTE(IAIHMB @ Apr 7 2005, 02:31 AM)

Edit: This is strange, it's taking longer than I expected. I'm not getting up until I figure it out, so your question will be answered, sooner or later.

Yea, it's strange, isn't it?

Either way, thank you so much for the help.

IAIHMB

Apr 7 2005, 03:34 AM

I have figured it out, it isn't the best solution, but it gets the job done.

XHMTL:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Alignment Example</title>
    </head>
    <body>
<div id="container">
     <div id="content">It's on!

</div>
</div>
</body>
</html>

CSS:

CODE

#container {
    border: 1px solid #000;
    height: 500px;
    width: 750px;
}

#content {
    border: 1px solid #00F;
    float: right;
    height: 25px;
    margin: 465px 0px 0px 0px;
    width: 100px;
}

I will figure out a better way. Maybe one of the more established web developers could help us out here?

Edit: There isn't suppose to be a smiley in my code, i'm just not there tonight. I also cleaned up the code a bit, this isn't right, i've reread 3 chapters in this damn book and still don't see what's going on.

Apr 7 2005, 01:15 PM

You can also make a paragraph within the divider, then use this sheet:

CODE

#mydivider p {
bottom: 0;
position: absolute;
right: 0;
}

Payton

Apr 7 2005, 02:31 PM

QUOTE(Veracon @ Apr 7 2005, 05:15 AM)

You can also make a paragraph within the divider, then use this sheet:

CODE

#mydivider p {
bottom: 0;
position: absolute;
right: 0;
}

wouldn't that send it to the right bottom of the page? not the div?

Stephen

Apr 7 2005, 02:44 PM

Position is within its container block, in this case the <p> is contained in the <div> so positioning is within that div

Sebastian Mares

Apr 7 2005, 02:59 PM

So when do you use relative positioning then?

Apr 7 2005, 03:14 PM

At least that's what the W3C says; that an absolutely positioned element is positioned in relation to the parent element; in this case, the divider.

IAIHMB

Apr 7 2005, 07:43 PM

I tried that last night, but it sent me to the bottom right hand side of the page. There has to be a way to do this with a paragraph, text-align, and vertical-align.

Edit: This bugs me to much, I need an answer. I posted over at Neowin, there are some smart people there, let's see what they say.

http://www.neowin.net/forum/index.php?showtopic=306097

Payton

Apr 8 2005, 12:32 AM

QUOTE(Veracon @ Apr 7 2005, 07:14 AM)

At least that's what the W3C says; that an absolutely positioned element is positioned in relation to the parent element; in this case, the divider.

I don't think it works that way if you test it out though..

Payton

Apr 8 2005, 12:33 AM

QUOTE(IAIHMB @ Apr 7 2005, 11:43 AM)

I tried that last night, but it sent me to the bottom right hand side of the page. There has to be a way to do this with a paragraph, text-align, and vertical-align.

Edit: This bugs me to much, I need an answer. I posted over at Neowin, there are some smart people there, let's see what they say.

http://www.neowin.net/forum/index.php?showtopic=306097

well, is the div fixed width and height? then you could just do

position: relative;
top: ##px;
left ##px;

HatTer

Apr 8 2005, 01:07 AM

QUOTE(Payton @ Apr 8 2005, 12:33 AM)

well, is the div fixed width and height? then you could just do

position: relative;
top: ##px;
left ##px;

Yea, this is what I ended up doing. I was thinking of doing that in the first place, but I'd thought that there must have been an easier way.

I guess there isn't.

Apr 8 2005, 07:54 AM

Why not use bottom (0) and right (0) like I posted? This way, it'll work even with fluid layouts.

IAIHMB

Apr 8 2005, 08:15 AM

I'm sure he would love to, if it actually worked. The results can be found in the attached screenshot, and here is the code:

XHTML:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Alignment Example</title>
</head>
<body>
<div id="container">
<p>It just doesn't work.</p>
</div>
</body>
</html>

CSS:

CODE

#container {
    border: 1px solid #000;
    height: 500px;
    width: 750px;
}

#container p {
    bottom: 0px;
    height: 50px;
    position: absolute;
    right: 0px;
    width: 500px;
}

Screenshot:

Apr 8 2005, 08:19 AM

That's extremely stange, I can display it fine.

Otherwise, you could try position: relative/top: 100%, but I'm not sure if it'll work.

Stephen

Apr 8 2005, 12:41 PM

QUOTE(Sebastian Mares @ Apr 7 2005, 02:59 PM)

So when do you use relative positioning then?

relative is relative to where it would normally appear, similar to margins. so

position: relative;
left: 20px;
top: 20px;

will move it left 20px and down 20px from where it would normally be in the document flow, rather than 20px left/down from the top left corner of its container

Stephen

Apr 8 2005, 12:46 PM

QUOTE(IAIHMB @ Apr 8 2005, 08:15 AM)

I'm sure he would love to, if it actually worked. The results can be found in the attached screenshot, and here is the code:

XHTML:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Alignment Example</title>
</head>
<body>
<div id="container">
<p>It just doesn't work.</p>
</div>
</body>
</html>

CSS:

CODE

#container {
    border: 1px solid #000;
    height: 500px;
    width: 750px;
}

#container p {
    bottom: 0px;
    height: 50px;
    position: absolute;
    right: 0px;
    width: 500px;
}

Screenshot:

its because the container element isn't positioned relativity, its statically positioned, give it a position: relative on #container and it will work. People often make that mistake, the default positioning is static, not relative with a top and left offset of 0 like you assume, I've done it myself before

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.