Tabell i float-div

Jag har två divar, båda "float:left" för att få två kolumner. Den vänstra med fast bredd och den högra ska fylla ut resterande utrymme, och det fungerar bra tills jag placerar en tabell med 100 % bredd i den högra diven. Då blir det knas i Firefox och diven och tabellen lägger sig under den vänstra diven. I IE6 ser det ut precis som det ska.

Jag vet inte vilken browser som visar fel, men någon kanske kan upplysa mig om vad jag gör för fel?

http://member.webforum.nu/1826/test.html

Tack på förhand!

explorer tycker att 100% är 100% av diven, medan firefox tycker att 100% är 100% av webbläsaren. så du har två alternativ.

ett) positionera colTwo

div#colOne {
width:200px;
height:200px;
float:left;
background-color:#ccc;
}
div#colTwo {
position:absolute;
top:0px; left:200px;
background-color:#999;
}

två) sätt till en class som bryter av de flytande divarna samt sätt float:right på colTwo

div#colOne {
	width:200px;
	height:200px;
	float:left;
	background-color:#ccc;
}
div#colTwo {
	float:right;
	background-color:#999;
}
div.clear {
clear:both;
}

<div id="colOne">
	&nbsp;
</div>

<div id="colTwo">

	<table width="100%" border="1" cellspacing="0" cellpadding="0">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
<div class="clear">&nbsp;</div>

Inget av alternativen fungerar sorgligt nog. Att absolut positionera högerkolumnen funkar inte eftersom dess bredd måste fylla ut hela den del av fönstret som inte tas upp av vänsterkolumnen. Alternativ 2 fungerar inte av okänd anledning.

Följande kanske kan fungera

div#colOne {
	float:left;
	width:200px;
	height:200px;
	background-color:#ccc;
}
div#colTwo {
	background-color:#999;
	margin-left:200px;
}

Det funkar visserligen på exemplet, men exemplet motsvarar inte längre koden som strular. Jag har försökt destillera ner ett nytt exempel som visar problemet.

I diven "colOne" är menyn tänkt att ligga, till vänster på sidan. Till höger om denna ska innehållet ligga i diven "colTwo". I "colTwo" använder jag ett css-hack (".clearFix") som jag hittade på en sajt någonstans, som löser "float-problemet". Det är nog mer tydligt om man tittar på exemplet (i Firefox) och på koden, än att jag försöker förklara. Jämför då med IE så ser man tydligt felet.

Problemet är hursomhelst att vänsterkolumnen trycker ner allt innehåll som ligger efter float-hacket, i Firefox, och jag ingen aning om varför.

http://member.webforum.nu/1826/test2.html

Det låter som detta problem:

The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! "Previous" in this case means any float that comes earlier in the source document.

[...]

If the clearer is within a floated container, it will clear only the floats that preceed it within that floated container. The clearing element will not reach outside of its floated container to clear external floats. Also, the clearer has no effect on its floated parent container, other than to make it enclose any nested inner floats.

http://www.positioniseverything.net/easyclearing.html

Dock fungerar det inte för mig eftersom jag inte kan sätta en float med fast bredd på "colTwo" eftersom den ska sträcka ut sig på bredden.

http://www.webforum.nu/showthread.php?t=148433
kanske kan hjälpa?

Men se på fan, det fungerar! Underbart! Tack!