Peter,
After a quick look at the css of your problem, I came up with the
following that works how you want it to in both IE and Mozilla.
I applied a float to the .main container, and also width:auto. You
don't actually need the width:auto there, but it is good practice to
have a width for every float.
I also applied relative positioning to the .main p declaration, as
then it will obey the z-index:
<style type="text/css">
.main{
z-index: 0;
position: relative;
background-color: #c00;
float: left;
width: auto;
}
.main p{
position: relative;
z-index: 3;
}
.bluebox{
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
background-color: #369;
width: 100px;
height: 100px;
}
</style>
---- Original Message ----
From: [EMAIL PROTECTED]
>hiya, this is hopefully a simple little problem - but my brain is
>refusing
>to work today :)
>
>on this test page...
>http://c41.com.au/test/position_test.html
><http://c41.com.au/test/position_test.html> (yep, validated)
>...is the example of the problem (i've stripped out all the extra
>html/css
>to make it easier for you to peruse)
>
>I want the blue box to appear at the bottom left of the red box (so
>its
>inside the red box) - and i want the text to overlap it.
>
Regards,
David McDonald
Web Designer
http://www.davidmcdonald.org
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
