?
Solved

How to position a nested DIV at bottom of parent DIV (same as background-position: bottom)

Posted on 2008-01-29
3
Medium Priority
?
3,926 Views
Last Modified: 2010-07-27
Hi,

I am looking for solution to position a nested DIV at bottom of the parent DIV.
The functionality would be the same as positioning an image using 'background-position: bottom center'

Is this possible using CSS?
I am quite proficient at CSS but cannot think of how this could be achieved.

Would love to hear any input or comments on this.

Cheers.
Steve
<div id="ParentContainer" style="width:200px;height;500px;">
    
   <div id="AnyOldDiv_UsuallyLeftMenu" />
 
    <!-- Need this container to be at bottom of 'ParentContainer' -->
    <div id="NestedContainer" />
 
</div>

Open in new window

0
Comment
Question by:smacca
3 Comments
 
LVL 3

Accepted Solution

by:
goban earned 1000 total points
ID: 20775374
Here is one possible way
<div id="AnyOldDiv_UsuallyLeftMenu" style="background:#ccccff; z-index:1; position:absolute; height: 500px; width: 200px;">Container Div
<!-- Need this container to be at bottom of 'ParentContainer' -->
<div id="2" style="background:#ffcccc; z-index:2; position:absolute; left: 50px; top: 450px; height: 50px;">Nested Div</div>
</div>

Open in new window

0
 

Author Comment

by:smacca
ID: 20775673
can you absolute position the nested container from 'bottom'.
The html provided assumes the container is of a fixed height.
<div id="AnyOldDiv_UsuallyLeftMenu" style="background:#ccccff; z-index:1; position:absolute; height: 500px; width: 200px;">Container Div
<!-- Need this container to be at bottom of 'ParentContainer' -->
<div id="2" style="background:#ffcccc; z-index:2; position:absolute; left: 50px; bottom: 50px; height: 50px;">Nested Div</div>
</div>

Open in new window

0
 
LVL 4

Assisted Solution

by:fridaynightjazz
fridaynightjazz earned 1000 total points
ID: 21070692
smacca,

How about the code snippet below?

Hope this helps!

FNJ
<div id="AnyOldDiv_UsuallyLeftMenu" style="background:#ccccff; z-index:1; position:absolute; height: 800px; width: 200px;border:solid 1px #000;">
	Container Div
	<div id="2" style="background:#ffcccc; z-index:2; position:absolute; left: 50px; bottom: 0px; height: 50px; width:50px;">Nested Div</div>
</div>

Open in new window

0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question