I'm doing a layout in four equal size boxe, a 2-by-2 grid effectively. I want the content of the bottom-right box to appear in the markup before the top-right box, so I decided to absolutely position the top-right box and float all the rest:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Four Boxes</title>

<style type="text/css">

body {
	text-align: center;
	background: #fff;

#container {
	margin: 0 auto;
	width: 600px;
	text-align: left;
	position: relative;

#one, #two, #three, #four {
	width: 300px;
	height: 300px;
	margin: 0;
	padding: 0;

#one {
	background: #fcf;
	float: left;
	width: 301px;

#two {
	background: #ffc;
	position: absolute;
	top: 0px;
	right: 0px;

#three {
	background: #cff;
	float: left;
	clear: left;

#four {
	background: #cfc;
	float: right;




<div id="container">

<div id="one">Logo</div>

<div id="three">Navigation</div>

<div id="four">Content</div>

<div id="two">Picture</div>

</div> <!-- /container -->


In IE6, all the others are in their correct places, but the top-right box ("Picture") has vanished.