We help IT Professionals succeed at work.
Get Started

CSS Design Centered DIV Layout

444 Views
Last Modified: 2013-11-19
I am working on a web page design.
You can see it on http://syskonsult.com/index2.html
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="paulk">
	<BASE HREF='http://syskonsult.com/'>

	<title>Title text</title>
	<style>
	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;}
	</style>



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

<body>
<!-- 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.
		
	</div>
	<!-- Content Pictures in right side column-->
	<div style='position:absolute; top:0px; left:803px; width:261px;'>
		<img src="rightcolpics.jpg" style='float:right;'>
	</div>
	<!-- 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
	</div>
</div>

<!-- 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)
			</script>
		</div>
	</div>
</div>

</body>
</html>

Open in new window

Comment
Watch Question
Top Expert 2010
Commented:
This problem has been solved!
Unlock 2 Answers and 12 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE