Member Avatar for Cerberus

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
  • 130 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by GiorgosK

Recommended Answers

All 7 Replies

Member Avatar for Cerberus

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

Thanks again.

Member Avatar for GiorgosK

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>
Member Avatar for Cerberus

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?

Member Avatar for GiorgosK

I did not check it with firefox actually

put this in the style tag

body, html {
height:100%;
}

it should work with Firefox now

Member Avatar for Cerberus

Thanks a lot for your help, it works superbly.

Member Avatar for GiorgosK

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.