SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    81
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Fluid position:relative with child position:absolute

    Hi Guys,

    Can anyone please offer me some advice on this.

    1. I have a <div> - position:relative.
    2. Inside I have a child <form> which is - position:absolute

    Because the <form> is "position:absolute", I have to give the height of the parent "position:relative". Which works fine if the height were to be static:



    The problem is I want to account for form errors and I want to have it processed via Ajax. I plan to have each error highlighted below the respective form field and as such the <form> will then appear "break out" of the containing static height div.

    I've tried "float:left" on the <form> too and then then placed some test text below it and placed a "clear:left". That almost worked until I checked IE:



    Can anyone please offer any suggestions?

    Thanks in advance...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Dablue View Post
    1. I have a <div> - position:relative.
    2. Inside I have a child <form> which is - position:absolute
    That's your problem, really. There's no reason to position the form absolutely, as far as I can see. If you remove position:absolute from the form, it will happily sit inside the div and do its thing, all within the natural flow of the document. Adding extra elements to the form will just mean the containing div expands naturally.

    As a general rule, use position:absolute as rarely as you can. It's horrid for general layout purposes.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    81
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Something as simple as that, I can't believe I messed that up.

    Thanks very much Ralph, I appreciate it.


Tags for this Thread

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
  •