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.

Thanks for the reply. I tried that previously but couldn't get it to work. The problem was the CSS positioning.

Thanks again.

This works, just added the wrapper

change the heights and width and margins according to your needs

<html>
<head>
<style type="text/css">
#wrapper{
    width:500px;
    height:500px;
    position:relative;
    margin-left:-250px;
    left:50%;
    margin-top:-250px;
    top:50%;
}
#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="wrapper">
    <div id="logo"></div>
    <div id="banner"></div>
    <div id="content"></div>
</div>
</body>
</html>

GiorgosK that works great in IE but it doesn't render properly in Firefox. I'll mess around with it a bit to see if i can get it to work.

This is what i have using the other way.

<html>
<head>
<style type="text/css">
body{text-align: center;}

#container{
    margin: 0 auto;
    width: 600px;
    height: 600px;
    text-align: left;
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
    border-right: 1px solid blue;
    border-left: 1px solid blue;
}
  
#logo{
    background-color: red;
    top: 100px;
    left: 0px;
    width: 100px;
    height: 100px;
}

#banner{
    background-color: blue;
    top: 0px;
    left: 100px;
    width: 500px;
    height: 100px;
}

#content{
    background-color: green;
    top: 100px;
    left: 0px;
    width: 600px;
    height: 600px;
}
</style>
</head>
<body>
<div id="container">
    <div id="logo"></div>
    <div id="banner"></div>
    <div id="content"></div>
</div>
</body>
</html>

The problem i'm having is that the container div positions the other divs one on top of the other instead of this...

1122222
1122222
3333333
3333333
3333333

I think it's got something to do with the position attribute but i'm not making sense of them yet. Any suggestions anyone?

I did not check it with firefox actually

put this in the style tag

body, html {
height:100%;
}

it should work with Firefox now

Thanks a lot for your help, it works superbly.

No problem Cerberus,

rep is always appreciated if you did find my post valuable.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.