Problem comes if you need to use relative parent and absolute positioned child outside the parent box with 100% width. This way child will get parents width and not “normal” width.

I haven’t found any workarounds for this. So if you have some ideas about canceling this rule from parent, please post. =)

…but I have the same question as MeepMeep above me.

When using a container that is relatively positioned and has absolutely positioned elements inside of it, the absolutely positioned elements are taken out of the normal flow of the container and the container renders “empty”. This is especially noticable when applying a background to the container and it no longer “stretches” to the appropriate size according the flow of the elements within.

Tried using the “clear fix” as you do with floated elements but the absolute positioning seems to take them completely out of the flow, so that fix doesn’t work.

Any CSS masters have a solution? (please don’t say floats)

This doesn’t work, as the absolute div renders outside the relative one’s boundaries.

e.g. Here’s a relative div, with an absolute inside it to display a red box.

reldiv {

position: relative;
text-align: left;
}

absdiv {

position: absolute;
top: 200;
left: 200;
width: 50px;
height: 50px;
border: 1px solid #ff0000;
}

Hi

Is there any way around this?