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

IP logged posted posted 08-05-2004 19:16 Edit Quote

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

IP logged posted posted 08-05-2004 20:21 Edit Quote

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

IP logged posted posted 08-05-2004 21:09 Edit Quote

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

IP logged posted posted 08-05-2004 23:44 Edit Quote

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

IP logged posted posted 08-06-2004 05:43 Edit Quote

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

IP logged posted posted 08-06-2004 05:58 Edit Quote

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

IP logged posted posted 08-07-2004 15:59 Edit Quote

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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu