0

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.

3
Contributors
7
Replies
8
Views
10 Years
Discussion Span
Last Post by GiorgosK
0

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

Thanks again.

0

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>
0

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?

0

I did not check it with firefox actually

put this in the style tag

body, html {
height:100%;
}

it should work with Firefox now

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.