[SOLVED] Help positioning a div relative to it's parent div

[Darkmatter5]

First of all if you have this code:

 

<div id="wrap">

  <div id="content">content</div>

  <div id="footer">footer</div>

</div>

 

Are content and footer considered child divs of the wrap div?  And is wrap considered the parent div of content and wrap?

 

Now here's my actual css and html

#login {
    height: 70px;
    min-width: 100%;
}
#yelblk_stripe {
    height: 5px;
    min-width: 100%;
    background: url(../images/stripe.png) repeat-x;
}

<div id="login">
    <div id="yelblk_stripe"></div>
    <div id="yelblk_stripe" style="position: absolute; bottom: 0px; left:0px; clear: both;"></div>
</div>

 

How can I get the bottom "yelblk_stripe" div to be along the bottom of the "login" div NOT the page.  I also failed to mention the "login" div is located about 1/4 of the way down the page.

[haku]

You can only use IDs once in files. If you want to re-use the name, you will have to switch them to classes.

 

But, as to the questions regarding parent and child divs, you are correct.

 

Give the parent div:

 

position: relative;

 

Then give the child div:

 

position: absolute;
bottom: 0;

[Darkmatter5]

Worked perfect, yet again PHPfreaks has come through for me!! thanks!

[Darkmatter5]

Let me add onto this question. I now have a wrapper div with three divs within.  All of which i want to line up along the top edge of the wrapper div.  Here's my code.

 

#content_wrap {
    position: relative;
    width: 100%;
    /*background-color: #A8A8A8;*/
    background-color: fuchsia;*/
}
#menu {
    float: left;
    width: 150px;
    margin: 0;
    padding: 1em;
    background-color: green;*/
}
#content {
    margin-left: 180px;
    border-left: 1px solid gray;
    margin-right: 330px;
    border-right: 1px solid gray;
    padding: 1em;
    background-color: blue;*/
}
#status {
    float: right;
    width: 300px;
    margin: 0;
    padding: 1em;
    background-color: red;*/
}

<div id="content_wrap">
  <div id="menu"> </div>
  <div id="content"> </div>
  <div id="status"> </div>
</div>

 

The menu and content divs display perfect, but the status div displays below the edge of the wrapper div, not inside.  It does however display along the right edge of the window.

 

I've attached a screenshot.

 

[attachment deleted by admin]

[haku]

You have to adjust the widths. There isn't enough room for that div to fit up there, which is why its getting bumped down.

 

That being said, this has nothing to do with relative and absolute positioning, its about floats.

[Darkmatter5]

Oh I just knew I started this post on divs and didn't want to clutter the forum with another div post by me.  So I added it to my first post.  Thanks for the help though!