Suppose there is a very simple web page.
<html>
<head>
<style type="text/css">
#logo{
background-color: red;
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
}
#banner{
background-color: blue;
position: absolute;
top: 0px;
left: 100px;
width: 500px;
height: 100px;
}
#content{
background-color: green;
position: absolute;
top: 100px;
left: 0px;
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>
How would i go about centering these acurately considering differing screen configurations?
Thanks.