Only works in 1024 x 768 resolution

[davy_yg]

I build website for 1024 x 768 layout : www.masterlink.co.id

but when you change the resolution the layout location turn to mess. Why is it ?

style.css

#header {
	background-color: #999999;
	height: 200px;
}

#login {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	height: 50px;	
	background-color: #FFFF00;
	background-image: none;
}

#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(Images/search_box.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:-40px;
position:relative; /*important*/
left:800px;
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:5px;
left:20px;
width:146px;
height:28px;
font:arial;
font-style:italic;
color:white;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:3px;
left:163px;
width:30px;
height:25px;
}

#news1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	width: 180px;
	float: left;
	margin-top: 0px;
	margin-bottom: 10px;
	background-color: #FFFF00;
}
#content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	position: relative;
	visibility: visible;
	top: auto;
	margin-top: 30px;
	height: 300px;
	width: 750px;
	float: right;
}
#footer p {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	height: 10px;
}
#nav #login {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	background-position: right;
	right: auto;
}
#content #content1 {
	width: 500px;
	height: 100px;
	float: left;
	margin: 10px;
}
#content #content2 {
	float: left;
	height: 100px;
	margin-bottom: 20px;
	margin: 10px;
	width: 500px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	word-spacing: normal;
	white-space: normal;
	display: inline-block;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#footer {
	height: 150px;
	width: 1000px;
	float: left;
	background: yellow;
	margin-top: 200px;
	position: relative;
}
#event {
	z-index: 1;
	height: 200px;
	width: 180px;
	float: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: yellow;
	position:absolute;
	left: 0px;
	top: 665px;
}
#banner {
	z-index: 2;
	height: 180px;
	width: 180px;
	background-color: yellow;
	float: left;
	margin-bottom: 10px;
}
.headerStyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	background-image: url(Images/bar.jpg);
	background-repeat: no-repeat;
}
#kategori {
	z-index: 3;
	height: 200px;
	width: 180px;
	align: left;
	position: relative;
	margin-top: 5px;
	background-color: yellow;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
#columnleft {
	position: relative;
	top: 100px;
	left: 0px;
	background-color: #CCCCCC;
	float: left;
	width: 200px;
}

[hericles]

What exactly goes wrong? A screenshot would be nice so we could see what you are referring to.
Without forcing a minimum width on the containers you should just get a scroll bar if your content becomes larger than the screen. Once minimum width is hit everything starts to get shuffled down if there isn't enough space. In your case the moving down of items will happen after the screen size goes below 1000 pixels (i think based on what I see here).

[seonetsmartz]

You are suffering from Platform fragmentation, which is a big problem for modern app developers. They can either choose one platform to target and miss out on the majority of the market or target multiple platforms and watch the length of their development timeline multiply, too.

You can use the form of HTML5 to resolve your problem. HTML5 offers a common, standardized API that developers can target to ensure their apps run on a large and growing number of laptop, desktop, and mobile devices.

But HTML5 will not automatically solve every problem of platform fragmentation you have to follow the instructions for resolutions as shon in chart

Facebook 760 x any
Chrome Web Store any
iPad 1024 x 768
Motorola Atrix 960 x 540
HTC Droid Incredible 480 x 800
Droid 2 480 x 854
HTC Aria 320 x 480
Nexus One 480 x 800
iPhone 3g 480 x 320
iPhone 4 960 x 640

You have to follow MVC design pattern (Model, View, Controller).

var screens = {
iPhone: {
map: {width: 480, height: 300},
toolbar: {width: 480, height: 20, bottom: 0}
},
NexusOne: {
map: {width: 800, height: 380},
toolbar: {width: 800, height: 20, bottom: 0}
}
}

I hope this will helps you to resolve you problem.

[drjohn]

You are using position:absolute. This almost always causes big problems. In your the first div I saw in the source code is referenced from the left and the top.
The next two divs are referenced from the top and right. So obviously as the viewport is made wider or narrower, their position within the view port change, as the left and right reference points are moved.

Solution.

1 Put a wrapper div around the entire content, with a suitable width, say 500px in your case, and set margin:auto. That will centre it on the screen.

2 Next make two divs, one called #lefty and the other #righty. Give them a suitable width, in your case 215 - 220px. Float lefty left, and float righy right.

3 Repeat 5,000,000 times "Never use postion:absolute except in very VERY exceptional cases."

4 Whenever building a web page, resize the browser at regular intervals, and check the layout works in several different browsers too.

Problem totally solved.

It helps to learn css when building a web site.

[davy_yg]

Well, this is my website link:

http://www.masterlink.co.id/cgoods/index.php

Try to change it to : 800 x 600 or 1280 x 800 pixel. and it turns to a mesh.

I added to larger container on top of my style.css

#weblayout {
width:1000px;
height:670px;
}

It solves some problem but not all of them. I wonder what else did I did wrong in my css codes?

[drjohn]

You need to scrap your entire code and start again.

Your current code on http://www.masterlink.co.id/cgoods/index.php reads like this

doc type
<hmtl>
<head>
div (no body)
another <head>
div inside the above head
<body>
another <body>
another doctype
another <html>
yet another <head>
another <body>
then you close a div, which suggests that the extra heads and bodies and doctype are inside a div.
then a css file link that is not in a head
then another css file link
and yet another one!

And you wonder why it doesn't display properly!

It's a testimony to the wonders of modern browsers that it displays at all!
Your browser should fall over dead with all that confusing code, but somehow it manages not to crash and burn!

Copying and pasting is not coding. The errors are so obvious, starting again from an empty clean file is the only way to correct this mess of jumbled code.