CODEWITHSUNDEEP
csspositionalignment
joshmmo
joshmmo

Reputation: 1062

CSS position absolutue align bottom of div with parent

http://tinypic.com/r/9km2v8/5

In the image, you see the floating box. The top left corner of the box (0,0) is aligned with the top of the parent div which is line 3.

I am trying to get the bottom left corner of the floating box to align with the middle of the parent div.

I am using CSS:

.video_desc_box_open {
position: absolute; 
left: 500px;
width: 301px;
}

bottom: 0; does not work. It pushes it down very far on the page.

I am open to JS solutions too :)

Thanks!

EDIT: Almost forgot, the height is dynamic.

HTML:

<div class="video_odd">
<div class="video_list_viewed" >
<img src="viewed_no_odd.jpg" />
</div>
<div class="video_list_number">
3
</div>
<div class="video_list_title">
<a id="show-panel" class="show-panel" href="#">Title to vid</a>
</div>
<div class="video_list_desc">
Text goes here
</div>
<div class="video_desc_box">
<img src="desc_box_top.png" />
<div class="video_desc_box_text">
Text for the desc goes here
Run Time:1:21
<br>
Desc goes here
</div>
<img src="desc_box_bottom.png" />
</div>
<div class="video_list_post_date">
02/01/2011
</div>
<div class="video_list_run_time">
1:21
</div>
</div>

Upvotes: 0

Views: 2618

Answers (2)

Paradise
Paradise

Reputation: 470

I think I kinda understand your question, try this:

#parent_div {

position:relative

}

.video_desc_box_open {
    position: absolute; 
    top:-50%
    left: 500px;
    width: 301px;

}

if you could provide live code it will be easier to help :)

Upvotes: 2

John Stimac
John Stimac

Reputation: 5491

Add position:relative; to the box's parent then align using bottom.

Upvotes: 2

Related Questions