Help with CSS image positioning

Discussion in 'Web Design and Development' started by irishgrizzly, Apr 5, 2010.

  1. irishgrizzly macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #1
    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; 
    }
     
  2. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #2
    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!
     

Share This Page