Align 2x DIV centered - How?

StackOverflow https://stackoverflow.com/questions/19208092

Question

I have a DIV aligned centrally via CSS. But the problem is: when I want to align the second DIV the middle, then this DIV is distorted or left aligned. It is important that a DIV with "position absolute" and must be scrollable. And an other DIV with "position fixed" includes fixed and must remain always on top. What am I doing wrong? See a image: http://home.arcor.de/freedownload/wrong.jpg Here is code of HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
<title>{TITLE}</title>
<link href="site.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="top_fixed_content">
    <div id="topheader">
        <span id="topheader_logo"></span>
    </div>
    <div id="navigation"></div>
</div>
    <div id="main_content">
    <div id="main">noisy lines...</div>
    <div>
</body>

</html>

And here is Code of CSS:

html {
    background-image:url(sitebg.png);
}
body {
    margin: 0px;
    padding: 0px;
}
a {
    color: #41a9ef;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #ff9900;
    text-decoration: none;
}
#top_fixed_content {
    position: fixed;
    left: 50%;
    width: 1170px;
    margin-left: -585px;
    z-index: 1000;
}
#topheader {
    background-color: #fbfbfb;
    height: 103px;
}
#topheader_logo {
    position: absolute;
    top: 33px;
    left: 10px;
    background-image:url(logo.png);
    background-repeat: no-repeat;
    width: 232px;
    height: 40px;
    display: block;
}
#navigation {
    background-image:url(navigationbg.png);
    background-repeat: repeat-x;
    background-color: #48b1f8;
    height: 34px;
}
#main_content {
    position: absolute;
    background-color: #fbfbfb;
    width: 1170px;
    margin-left: -585px;
}

I hope someone can help me and find the solution. It would be fully appreciated.

Was it helpful?

Solution

You forgot the close #main_content, replace

<div id="main_content">
<div id="main">noisy lines...</div>
<div>

with

<div id="main_content">
<div id="main">noisy lines...</div>
</div>

And add left: 50% to the CSS of #main_content

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top