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.
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.
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).
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.
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.
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?
Thanks!
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.
I think you can just use the float method or inline-block ⇒ http://codepen.io/tovic/pen/rCohe