Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
Is it possible to using position: relative, to use bottom; 0px to get an image to align to the the bottom of a div element? I've tried pushing it down from the top, but I know this wouldn't be reliable.

EDIT - -

After some reading I understand that I can only use right/top attributes as "relative means relative to the spot where the element would sit if left in the normal flow." So I need absolute. Can in use absolute if I've employed the elements in a centred wrap?

Code:
<body>
<div id="container">
    <div id="content-container">
        <div id="content">
        <img id="mainimage" alt="" src="images/main.jpg" width="593" height="395" />
          </div>
            <div id="aside">
        </div>
    </div>
</div>
</body>

body
{
    text-align: center;
}

div#container
{
    margin-left: auto;
    margin-right: auto;
    width: 926px;
    text-align: left;
}

#content-container
{
    float: left;
    width: 926px;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    background: #fff;
}

#content
{
    clear: right;
    float: right;
    height: 612px;
    width: 695px;
    display: inline;
}

#content h2 { margin: 0; }

#aside
{
    float: left;
    width: 231px;
    height: 612px;
    background-color: #FFEB8D;
    display: inline;
}

#aside h3 { margin: 0; }

#mainimage  { 
position: relative;
top: 201px; 
left: 102px; 
}
 

designguy79

macrumors 6502
Sep 24, 2009
306
2
Michigan
Yes you can. Turn your "container" or "content" div into a "bounding box" by adding

position: relative;

(you don't have to actually move it anywhere, so leave "top" and "left" out, and they default to zero)

Then change you image to

position: absolute;
bottom: 10px;
right: 10px;

or whatever number of pixels away from the bottom right you want. Ta-da!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.