Topic: Right Align a Block Element within another Block Element $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22827" title="Pages that link to Topic: Right Align a Block Element within another Block Element" rel="nofollow" >Topic: Right Align a Block Element within another Block Element\$

Author	Thread
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 08-05-2004 19:16 Okay, How do you: Right Align a Block Element within another Block Element This DOES NOT work: #TEST2 { position: absolute; right: 0px; border: 1px solid black; width: 400px; height: 300px; } #TEST { right: 0px; border: 1px solid black; width: 100px; } <div id="TEST"> <div id="TEST2">testing</div> </div> Keep in mind... the size of the parent div element may be 300px wide or may be 600px wide, I don't want the div.TEST2 to care about this width. I realize I could absolutely set the left for div.TEST2. Karl
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 08-05-2004 20:21 Forget about absolute positioning - use float. This works - code: <html> <head> <title>test</title> <style type="text/css"> #TEST { border: 1px solid black; width: 400px; height: 300px; margin:5px; padding:5px; } #TEST2 { float:right; border: 1px solid black; width: 100px; margin:5px; padding:5px; } </style> </head> <body> <div id="TEST"> <div id="TEST2">testing</div> <p>Text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </body> </html> Just make sure the floated div is first.
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 08-05-2004 21:09 That works, but I need it to act more like a layer... so that text can appear over the top of it. I found no way to align right, but did discover that within a block element absolute blocks will align according to the parent element as long as you don't use: top and left, but will align correctly with margin-left and margin-top. So, the answer for me is to calculate the difference of the parent width and the absolute block width and set the margin-left property. Problem with this: I am forced to know the parent width. What If I don't know the parent width? It would be nice to be able to float this layer to the right of the parent.... any clues how to do this? Karl
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 08-05-2004 23:44 Perhaps if you explain why you need to do this, a better solution will come up.
MalFunkShun Maniac (V) Inmate From: few miles outside philly Insane since: Jul 2001	posted 08-06-2004 05:43 I think he's trying to get the right side background semi circle fade thing placed with text going over it. refer to THIS previous thread
ShadowImage Nervous Wreck (II) Inmate From: Melbourne, Victoria, Australia Insane since: Mar 2001	posted 08-06-2004 05:58 umm ... is this what you're trying to achieve? code: <html> <head> <title>test</title> <style type="text/css"> #TEST { position: absolute; right: 0px; border: 1px solid black; width: 400px; height: 300px; } #TEST2 { position: absolute; right: 0px; border: 1px solid black; width: 100px; } </style> </head> <body> <div id="TEST"> <div id="TEST2">testing</div> </div> </body> </html>
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 08-07-2004 15:59 Is it an IE thing? If I change TEST.div position attribute to normal (not absolute), then the child TEST2.div element no longer right aligns to the parent element TEST but instead finds the right side of the page. I'm mixing normal flow elements with elements that are absolute positioned within them (as an example). I have found that this absolute positioning works fine when I work with margin-left and margin-top properties only... Karl

Topic: Right Align a Block Element within another Block Element\$

Author

Thread

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 08-05-2004 19:16

Okay,

How do you: Right Align a Block Element within another Block Element
This DOES NOT work:

#TEST2 {
position: absolute;
right: 0px;
border: 1px solid black;
width: 400px;
height: 300px;
}

#TEST {
right: 0px;
border: 1px solid black;
width: 100px;
}

<div id="TEST">
<div id="TEST2">testing</div>
</div>

Keep in mind... the size of the parent div element may be 300px wide or may be 600px wide, I don't want the div.TEST2 to care about this width. I realize I could absolutely set the *left* for div.TEST2.

Karl

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 08-05-2004 20:21

Forget about absolute positioning - use float.

This works -

code:

<html>

<head>

<title>test</title>



<style type="text/css">



#TEST {

border: 1px solid black;

width: 400px;

height: 300px;

margin:5px;

padding:5px;

}



#TEST2 {

float:right;

border: 1px solid black;

width: 100px;

margin:5px;

padding:5px;

}

</style>

</head>



<body>



<div id="TEST">

<div id="TEST2">testing</div>

<p>Text text text text text text text text text text text text text text text text text text text text text text text</p>

</div>





</body>

</html>

Just make sure the floated div is first.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 08-05-2004 21:09

That works, but I need it to act more like a layer... so that text can appear over the top of it. I found no way to align right, but did discover that within a block element absolute blocks will align according to the parent element as long as you don't use:
top and left, but will align correctly with margin-left and margin-top.
So, the answer for me is to calculate the difference of the parent width and the absolute block width and set the margin-left property. Problem with this: I am forced to *know* the parent width. What If I don't know the parent width? It would be nice to be able to float this layer to the right of the parent.... any clues how to do this?

Karl

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 08-05-2004 23:44

Perhaps if you explain why you need to do this, a better solution will come up.

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

posted 08-06-2004 05:43

I think he's trying to get the right side background semi circle fade thing placed with text going over it.
refer to THIS previous thread

ShadowImage
Nervous Wreck (II) Inmate

From: Melbourne, Victoria, Australia
Insane since: Mar 2001

posted 08-06-2004 05:58

umm ... is this what you're trying to achieve?

code:

<html>

<head>

<title>test</title>



<style type="text/css">



#TEST {

position: absolute;

right: 0px;

border: 1px solid black;

width: 400px;

height: 300px;

}



#TEST2 {

position: absolute;

right: 0px;

border: 1px solid black;

width: 100px;



}

</style>

</head>



<body>



<div id="TEST">

<div id="TEST2">testing</div>

</div>





</body>

</html>

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 08-07-2004 15:59

Is it an IE thing?

If I change TEST.div position attribute to normal (not absolute), then the child TEST2.div element no longer right aligns to the parent element TEST but instead finds the right side of the page.

I'm mixing normal flow elements with elements that are absolute positioned within them (as an example). I have found that this *absolute* positioning works fine when I work with margin-left and margin-top properties only...

Karl

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Right Align a Block Element within another Block Element

Insert Slimies »

Insert UBB Code »