Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1463

Jul 17th, 2007

Centering CSS

Expand Post »

Suppose there is a very simple web page.

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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.

Similar Threads

How to center align the whole page? in HTML and CSS
Have a problem with centering "jpg" files in HTML and CSS

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 17th, 2007

Re: Centering CSS

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

vishesh

Reputation Points: 85

Solved Threads: 42

Nearly a Posting Virtuoso

Offline

1,362 posts
since Oct 2006

Permalink

Jul 17th, 2007

Re: Centering CSS

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

Thanks again.

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 17th, 2007

Re: Centering CSS

This works, just added the wrapper

change the heights and width and margins according to your needs

html Syntax (Toggle Plain Text)
<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>
<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

Reputation Points: 17

Solved Threads: 1

Junior Poster in Training

Offline

52 posts
since Jun 2007

Permalink

Jul 17th, 2007

Re: Centering CSS

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 and CSS Syntax (Toggle Plain Text)
<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>
<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

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 17th, 2007

Re: Centering CSS

I did not check it with firefox actually

put this in the style tag

body, html {
height:100%;
}

it should work with Firefox now

GiorgosK

Reputation Points: 17

Solved Threads: 1

Junior Poster in Training

Offline

52 posts
since Jun 2007

Permalink

Jul 17th, 2007

Re: Centering CSS

Thanks a lot for your help, it works superbly.

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 17th, 2007

Re: Centering CSS

No problem Cerberus,

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

GiorgosK

Reputation Points: 17

Solved Threads: 1

Junior Poster in Training

Offline

52 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Text is dropping out of place

Next Thread in HTML and CSS Forum Timeline: Don't know where to post this website question...

DaniWeb Message

Cancel Changes

User Name
Password