Viewing Thread:
"CSS, Alligning an object right?"

Hey all,
I'm tying to get CSS to place a 2px line to the right side of the browser, but with no success.

#leftblack{
margin-top: 0px;
margin-left: 0px;
height: 100%;
width: 2px;
padding: 0px 0px 0px 0px;
background: #000000;
position: absolute;
}

The above code works to align a 2px line to the left side, so I assumed the following would align the line to the right, but it didn't.

#rightblack{
margin-top: 0px;
margin-right: 0px;
height: 100%;
width: 2px;
padding: 0px 0px 0px 0px;
background: #000000;
position: absolute;
}

I've tried using percentages for the left magin to align it right, but that doesn't work (depends on the size of the browser), so I'm not sure what to try now. Any ideas?

Cheers
S.A.

EDIT: Right, I've scrapped the border thingy, it effects the percentages to much. However, I still need to know how to align text vertically using CSS.

Hey all,
I'm tying to get CSS to place a 2px line to the right side of the browser, but with no success.

#leftblack{
margin-top: 0px;
margin-left: 0px;
height: 100%;
width: 2px;
padding: 0px 0px 0px 0px;
background: #000000;
position: absolute;
}

The above code works to align a 2px line to the left side, so I assumed the following would align the line to the right, but it didn't.

#rightblack{
margin-top: 0px;
margin-right: 0px;
height: 100%;
width: 2px;
padding: 0px 0px 0px 0px;
background: #000000;
position: absolute;
}

I've tried using percentages for the left magin to align it right, but that doesn't work (depends on the size of the browser), so I'm not sure what to try now. Any ideas?

Cheers
S.A.

EDIT: Right, I've scrapped the border thingy, it effects the percentages to much. However, I still need to know how to align text vertically using CSS.

Unless I'm missing something, those two pieces of code are identical except for the name of the class. I'm a bit out of practise with coding at the moment - long time, no use - but I believe you can do it using the text-align property or right property, e.g.

text-align: right;

or

right: 0px;

With the latter method, you can increase the value to move it away from the edge, so if you want the line to be 10 pixels from the edge of the page, you could use:

right: 10px;

Nimco wrote:
> Unless I'm missing something, those two pieces of code are identical
> except for the name of the class.

Look again. One has the margin-right as 0px rather than the margin-left, which doesn't work.

Also, how do I align texts vertical position in an element, I want it at the base.

It's be easier for a visual representation of what you are doing.

Whats your website URL?

vertical-align: bottom;

Nimco wrote:
> vertical-align: bottom;

Doesn't work.

gamezfreak wrote:
> It's be easier for a visual representation of what you are doing.
>
> Whats your website URL?

http://timesplitters-futureperfect.port5.com/

Don't worry everyone, I've sorted it all out by using extra div tags.

Nimco wrote:
> vertical-align: bottom;

Only works based on westher it's inheritance is from a block or inline element. Spent the last week studying verticle alignments in forms etc and it's actually quite confusing.

For instance, you have a search field in a div, you'd naturally assume that you would apply the verticle align to that div, but no, this doesn't work. You have to apply it to the input field as this is block element which the others will use to reference it's baseline...

Told you it was confusing.

As for the margin/line issue, your trying to align 2 divs next to each other on individual ID's. Divs are block elements, similar to p's ao there for will naturally push the other out of the way.

Have a look at this:
http://www.thenoodleincident.com/ [Space] tutorials/box_lesson/boxes.html