Absolute versus Relative Positioning

The twitter divs and photo divs were moving around the page in accordance with the browser, to fix this I put a wrapper division around all the other divisions, and positioned them relative to the wrapper div:
Link: http://mydataflows.herobo.com/myDataflows2/mydataflows2.php
HTML/PHP

// as you can see a wrapper
// this is to add space to the top and the bottom of the wrapper, otherwise it collapses the wrapper


 

Last Update and Location: ";
// loads an external RSS file
$twitterxml = simplexml_load_file('http://twitter.com/statuses/user_timeline/64679821.rss');
$photoxml = simplexml_load_file('http://feed1122.photobucket.com/albums/l530/chesterloffman/account.rss');
$locationxml = simplexml_load_file('http://geekvault.no5.at/blogloc/feed/chesterloffman.xml');

// for each function loads photoitem, parameter in which if the counter for the photos is less than 6 + 1 photo
foreach ($photoxml->channel->item as $photoitem) {
	if($photocounter < 6){
	    $photocounter=$photocounter+1;
}  
	//loads rss feed variable of the image, concatination used to add a counter e.g. 1,2,3... to each photo so that they can be individually edited - using css ID, however had to apply ID to the image source not ID for css styles to work
	print "

";
    print "
";
// if the counter reaches 6, break the function, meaning that it will only display 6 photos in total from the RSS feed. 
    if($photocounter==6){
	     break;
		    } 
}
print "


";
foreach ($twitterxml->channel->item as $twitteritem) {
	/*loads rss feed of the twitter same proccess as above, but different paremeters have been used in the CSS stylesheet for each individual twitter update.
	however unlike the photos above div id is added to the div */
    print "

$twitteritem->title
";
    print "


";
if($twittercounter < 6){
	$twittercounter=$twittercounter+1;
	if($twittercounter==6){
	break;
	}
	}
	}

foreach ($locationxml->entry->title as $locationitem) {
	if($locationcounter < 1){
	    $locationcounter=$locationcounter+1;
}  
	//grabs the latest feed for location update, date and place
	print "

$location$locationitem'
";
    print "
";
// if the counter reaches 1 it will break the function as I only want to grab the first function
    if($locationcounter==1){
	     break;
		    } 
}

?>



 

CSS: (as you can see all the elements are positioned relative, and I now have a wrapper division.

body {
background:gray;
text-align:center;
margin:0px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
	}
.resize {
width: 100px;
height : auto;
}
.resize {
width: auto;
height : 150px;
}
.divtwitter {
font-family:"Times New Roman", Times, serif;
font-size:20px;
color:white;
text-align:left;
float: left;
width: 400px;
height: auto;
}
.divphotobucket {
float: left;
}
#divspacer {
  clear: both;
  }

#wrapper {
	width: 1024px;
	margin-left: auto ;
	margin-right: auto ;
	border: 1px solid black;
	padding: 0px;
}
#photo1 {
width: 250px;
height : auto;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
float: left;
position: relative; left: -50px; bottom: -10px; 
z-index: 100 
}
#photo2 {
width: 220px;
height : auto;
float: left;
filter:alpha(opacity=90);
-moz-opacity:.80;
opacity:.80;
position: relative; left: 300px; bottom: 10px; 
z-index: 100;
}
#photo3 {
width: 180px;
height : auto;
float: left; 
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: -40px; top: 200px; 
z-index: 100; 
}
#photo4 {
width: 140px;
height : auto;
float: left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: -40px; top: 200px; 
z-index: 100;

}
#photo5 {
width: 120px;
height : auto;
float: left;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: relative; left: -40px; top: 200px; 
z-index: 100;
}
#photo6 {
width: 80px;
height : auto;
float: right;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: relative; left: -40px; top: 200px; 
z-index: 100; 
}
#twitter0 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: left;
padding-top: 20px;
position: relative; left: -40px; top: bottom: -50px; 
z-index: 100; 
}
#twitter1 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
position:relative;
padding-top: 35px;
float: left;
position: relative; left: 70px; bottom:: 400px; 
z-index: 100; 
}
#twitter2 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: left;
padding-top: 25px;
position: relative; left: 150px; bottom: 350px;  
z-index: 100; 
}
#twitter3 {
font-size: 26px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: 200px; bottom: 300px; ; 
z-index: 100; 
}
#twitter4 {
font-size: 16px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: -40px; bottom: 400px; 
z-index: 100; 
}
#twitter5 {
font-size: 12px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: -40px; bottom: 100px;  
z-index: 100; 
}
#twitter6 {
font-size: 8px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: 500px; bottom: 100px; 
z-index: 100; 
}
#location1 {
font-size: 15px;
color: white;
float: left;
position: relative; left: 300px; bottom: 598px;  
z-index: 100; 
}
#map_canvas {
	float: left;
	position: absolute; top: 0; bottom: 0; 
left: 0; right: 0;
	padding-top: 155px;
}