No replies
vincentMeens
Offline
newbie
Last seen: 12 years 7 weeks ago
Joined: 2009-08-07
Posts: 1
Points: 0

Hello Guru's,

I'm trying to make a div float to the right with floating elements inside as well, while remaining the width of the inner elements. This is exactly what Safari and Opera do, yet FireFox and Internet Explorer don't (They seem to block fill out the full width instead of the width of it's contents.) See the image below.

My question is how do I get FF and IE to behave like Safari and Opera ?

Many thanks in advance,
Vince

CSS:

.testContainer
{
	display: block;
 
	position: relative;
 
	width: 400px;
 
	background-color: red;
}
 
.testControl,
.testControlInner,
.testControlPrefix
{
	display: block;
 
	float: right;	
 
	text-align: right;
 
	position: relative;
}
 
.testControl
{
	background-color: green;
}
 
.testControlInner
{
	background-color: blue;
}
 
.testControlPrefix
{	
	font-size: 10px;
	line-height: 10px;
 
	background-color: yellow;
}
 
.clearFloats
{
	clear: both;
}

html:

<div class="testContainer">
	<div class="testControl">
		<div class="testControlInner">
			<span class="testControlPrefix">Prefix</span>
			<span class="clearFloats"></span>
		</div>
		<span class="clearFloats"></span>
	</div>
	<span class="clearFloats"></span>
</div>