SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pin a Div to the Bottom of Another Div

    Hi there,

    Bit of a CSS newbie so please go easy on me - I've read the FAQ on this board, detailing how to pin content to the bottom of a div, using abosolute positioning, and I'm getting mixed results - specifically IE messes it up.

    My structure is something like this in pseudo format:

    HTML Code:
    <div id="container">
      <div id="image" style="float:left">
        <img />
        <p></p>
      </div>
      <h1></h1>
      <p></p>
      <p></p>
      <div id="form">*form elements*</div>
    </div>
    I applied position: relative; to #container, and position: aboslute; bottom 0; to #form but in IE the #form div aligned with an outer element (another div) rather than the #container.

    I'm hacking code together here from an existing design, so I'm limited in terms of what I can change outside of the sample HTML snippet.

    Any advice much appreciated.

    Thanks,

    DM

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sounds like that should work, unless you have a typo. But also, that form div would, in the normal flow, always be at the bottom of the container div anyway, so why do you need this positioning at all?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks for the extremely fast reply!

    Maybe I need a little more general advice on my approach in that case. I'm creating a simple ecommerce product page listing:

    - Image on the left, image height and width will change
    - Heading, description to the right of the image (total height of these elements will always be less than image height)
    - A few links and a form forced to appear in line with the bottom of the image below the content on the right.

    I'm not sure but I think my #form div from the example is not displaying at the bottom because my image is floated left? If I were to clear before the #form div its content is no longer forced over to the right and wraps under the image.

    Im confused! lol. Does that make any sense?

    Ta,

    DM

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I applied position: relative; to #container, and position: aboslute; bottom 0; to #form but in IE the #form div aligned with an outer element (another div) rather than the #container.
    Hi, we'd need ot see full html and css to debug properly.

    If IE isn't playing ball then the likely culprit is "haslayout" and IE will not position elements correctly from a parent that doesn't have "haslayout".

    Makes sure #container has a width defined so that haslayout is in effect.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •