How can I prevent a parent div from growing with its children?

css, position

Solution

Use absolute positioning to breakaway from parent. Also you will need `overflow: visible` and a clearfix:

.wrap {
    position: relative;
    overflow: visible;
}

.wrap::after {
    content: "";
    display: table;
    clear: both;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
}

.right ul {
    position: absolute;
    top: 100%;
    left: 0;
}

Problem

I have a `ul` inside of a `div`, and want the containing `div` to not be affected by the child `ul` in terms of height. Jsfiddle: http://jsfiddle.net/9eCq6/3/ Referring to the jsfiddle, I'd like the yellow `div` to not be any taller than the blue `divs`, and for the block of text below the colored `divs` to not be pushed down by the red `ul` - that is, I'd like it to overlap the block of text below. I suspect the answer lies in positioning and is affected by the floats being applied, but I haven't been able to find the solution yet. What should I do, or read, to find the solution? Edit: I want to not give the parent a fixed height, because I don't know what content might get added to it.

Original source