Last week I came across a problem where I needed to float a container, but I also needed to position something absolutely inside that container. Now I suppose I could’ve done something like this:


<div id="outside_wrapper">
	<div id="inside_wrapper">
		<p id="float">Some floated content</p>
		<p id="absolute">Some absolutely
		positioned content</p>
	</div>
</div>

Then in my CSS I could do something like this:


div#outside_wrapper	{
	width: 700px;
	float: left;
			}

div#inside_wrapper	{
	width: 700px;
	position: relative;
			}

p#float	{
	float: left;
	}

p#absolute	{
	position: absolute;
	right: 0;
	bottom: 0;
		}

But why? Because as it turns out, this works just as well:


<div id="outside_wrapper">
	<p id="float">Some floated content</p>
	<p id="absolute">Some absolutely
	positioned content</p>
</div>


div#outside_wrapper	{
	width: 700px;
	float: left;
	position: relative;
			}

p#float	{
	float: left;
	}

p#absolute	{
	position: absolute;
	right: 0;
	bottom: 0;
		}

Maybe you already knew this and I’ve just been in the dark, but I was fairly excited about this. It is entirely possible to relatively position an element at the same time you are floating it. Not only will this allow you to absolutely position elements inside floated wrappers, but you can also float an element then position it relative to where it would normally float and even apply a z-index to the element. swan