The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Absolutely positioned children larger than their parent.

  • # February 4, 2013 at 11:38 pm

    Hi. I searched for a way to fix my problem and couldn’t find anything. Then in writing a codepen to show the problem, I found a way to fix it.

    [Here is a codepen]( showing the problem and solution that I describe below.

    ## Problem

    I had a list of LIs positioned relatively and child elements positioned absolutely (fairly typical). However, one of the absolutely positioned elements had too much content and overflowed out of the parent LI. I didn’t want to hide the text, I wanted the parent LI to grow to allow enough space.

    ## Solution

    To solve this, I gave the child a position of “relative” and set “top” and “left” appropriately. This would let the LI grow taller when this child grew, while leaving the other LIs untouched.

    I was wondering if anyone else has solved this problem in other/better ways. If not, I hope this helps. Thanks.

    # February 5, 2013 at 12:58 am

    Why are you using absolute positioning? Absolute positioning removes the element from the flow of the document, which is not ideal if that element has a relationship with the other elements around it, which it seems like it does in your case.

    # February 5, 2013 at 10:51 am

    Absolute positioning has been my goto for positioning elements (almost arbitrarily) within a container. Are you saying it would be better to position elements using “relative” and only use “absolute” positioning when absolutely necessary? Because, when I modify my codepen to use relative positioning for most elements, the parent LI allocates enough height for all of the relatively positioned elements (making it much larger than needed).

    Or are you saying the approach I took is correct?


    # February 5, 2013 at 11:10 am

    >Absolute positioning has been my goto for positioning elements (almost arbitrarily) within a container.

    In general, I believe that absolute/relative positioning should only be used for specific effects (overlaps etc).

    There are better and more robust methods of laying out web pages (float, inline-blocks etc) that are more responsive and easier to update & maintain.

    # February 8, 2013 at 6:27 am

    I think you can just use the float method or inline-block ⇒

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed