troubleshooting Question

CSS Design Centered DIV Layout

Avatar of kalleanka
kalleanka asked on
Web Languages and StandardsHTMLCSS
12 Comments2 Solutions445 ViewsLast Modified:
I am working on a web page design.
You can see it on
The design consist of several CENTERED div's. See the code attached.

It works fine in Firefox 3.6, BUT I noticed that in IE7 the background design start getting out of sync when the window inner width is smaller than 1064px. Apparently it works fine in IE8. I have not tested it yet in IE6, Opera or Chrome.

I wonder if anyone could come up with a working solution for my problem.
Below is a cut and paste code, complete with comments, to use directly on your computer. All images and links are linked to the domain so you can see the result directly while working on it.
I am very grateful if this problem could be solved quickly with attached CUT AND PASTE CODE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="paulk">

	<title>Title text</title>
	body {
		font:12px Arial;
		/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
		background:white url('background2064_2.jpg') top center repeat-y; 
	h1 {font:20px Arial;}

	<script src='fadeinout.js'></script>

<!-- This div is placed on top to push the Content up for SEO -->
<div style="position: absolute; left: 50%; margin-left: -532px; width: 1064px; top:229px; background-color: yellow; background-image:url('background1064.jpg')"> 
	<!-- Content Text -->
	<div style='position:absolute; top:0px; left:300px; width:503px'>
		<h1>Title text about this.</h1>
		Text text text text text text text text text text text text text text text text text text text.<br />
		Text text text text.
	<!-- Content Pictures in right side column-->
	<div style='position:absolute; top:0px; left:803px; width:261px;'>
		<img src="rightcolpics.jpg" style='float:right;'>
	<!-- Menu links -->
	<div style="position:absolute; top:20px; left:97px; width:203px; font:14px Arial; font-weight:bold; color:white;">
		Startsida<br />
		Videopresentationer<br />
		Teknisk specifikation<br />
		Orderformulär<br />
		Kontakt<br />
		Om Företaget

<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png')">
	<div style='position: absolute; left: 50%; margin-left: -532px; width:1064px; top:0px;'>
		<img src='logotype.jpg' style='width:300px; height:229px; float:left;'>
		<div style="width:503px; height:229px;float:left;">
			<script type='text/javascript'>
				// this creates a 503px*229px picture slideshow:
				var fadeimages=new Array();
				//SET IMAGE PATHS. Extend or contract array as needed
				fadeimages[0]=['topanim1.jpg', '', ''];
				fadeimages[1]=['topanim2.jpg', '', ''];
				fadeimages[2]=['topanim3.jpg', '', ''];
				fadeimages[3]=['topanim4.jpg', '', ''];
				fadeimages[4]=['topanim5.jpg', '', ''];
				//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
				new fadeshow(fadeimages, 503, 229, 0, 7000, 0)


Open in new window

Join our community to see this answer!
Unlock 2 Answers and 12 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros