Grow your CSS skills. Land your dream job.

Extending an absolutely positioned div to content height

  • # May 3, 2013 at 12:04 pm

    Is there a way in CSS to allow an absolutely positioned element to extend to it’s content’s height?
    Because you allow the content to overflow, but the element stays the same height.

    Take a look at this and lemme know if I’m just missing something:
    [Codepen test case](http://cdpn.io/uBHad “Codepen link”)

    # May 3, 2013 at 12:07 pm

    To start…why are you using absolute positioning?

    You’ve told the parent to be a certain height and it’s obeying. The absolutely positioned element is just doing what you have told it to.

    What you seem to be trying to do is force the parent element to respect the height of the child and absolute positioning can’t do that.

    # May 3, 2013 at 12:26 pm

    You can do something like this: http://codepen.io/Merri/pen/bzCBD

    Practical uses for this are quite limited though. If you can define a better use case then answers may improve.

    # May 3, 2013 at 1:20 pm

    I have a little overlay, for example. It has a message in it. If the message is longer than expected for whatever reason, I need a div that extends beyond it’s initial height.

    Maybe I’m going about this a weird way.

    # May 3, 2013 at 1:40 pm

    Do you mean a centered dialog?

    # May 3, 2013 at 2:39 pm

    With some jQuery: http://codepen.io/senff/pen/xCBsn

    # May 3, 2013 at 2:51 pm

    No, the dialog will be displayed over top of whatever field is being edited.
    If needed I’ll try to do a bit nicer-looking example. I just thought it was simple enough to do what I put in Codepen there. Guess I’m just not seeing it through your eyes.

    So someone is editing a field, hits “save”, this dialog comes up over top of the field saying “Good job” or an error message if needed.

    If the error message is huge for some reason, how is it handled in CSS with an absolutely positioned element? Jquery can do the job indeed! Just curious if CSS has a technique for doing so.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".