Centering CSS

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.

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

0

Two ways:
1 Use Tables
2. Use CSS
[
http://www.simplebits.com/notebook/2004/09/08/centering.html
http://www.maxdesign.com.au/presentation/center/
]
These links may help

vishesh

Nearly a Posting Virtuoso

1,381 posts since Oct 2006

Reputation Points: 85

Solved Threads: 42

4 Years Ago

0

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

Thanks again.

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

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>

GiorgosK

Junior Poster in Training

52 posts since Jun 2007

Reputation Points: 17

Solved Threads: 1

4 Years Ago

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?

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

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