I am having problems overlaping two boxes. Should I use absolute positioning? z-index or

Question

0

Asked: May 23, 20262026-05-23T06:51:11+00:00 2026-05-23T06:51:11+00:00

I am having problems overlaping two boxes. Should I use absolute positioning? z-index or

0

enter image description here

I am having problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +

I cant push the black box to the center why?
enter image description here

<!DOCTYPE HTML>
<html>

<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>

<body>

        <div id="masthead">

            <div id="logo">
                Logo here
            </div><!--end logo-->

            <div id="header">
                <div id="horizontalMainMenu">
                    <ul>
                        <li><a href="#">About Us     |</a></li>
                        <li><a href="#">Contact Us   |</a></li>
                        <li><a href="#">Metro Link   |</a></li>
                        <li><a href="#">WaRMSS Login  </a></li>
                    </ul>
                    <br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
                </div>
            </div>
            <!--end header-->

        </div><!--end masthead-->

        <div id="container">
            <div id="left_col">
                <div id="verticalMainMenu">
                    <ul>
                        <li><a href="#">Air Quality Control</a></li>
                        <li><a href="#">CalATERS</a></li>
                        <li><a href="#">Email Encryption</a></li>
                        <li><a href="#">Employee Guide</a></li>
                        <li><a href="#">Patient Special Function Requests</a></li>
                        <li><a href="#">Request Home Address <br> Confidentiality Form</a></li>
                        <li><a href="#">Travel Store</a></li>

                    </ul>
                </div><!--verticalMainMenu ends here-->
            </div><!--left_col ends here-->

            <div id="page_content">
                <div id="horizontalBodyMenu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Clinical</a></li>
                        <li><a href="#">Administrative</a></li>
                        <li><a href="#">Service</a></li>
                        <li><a href="#">Search</a></li>

                    </ul>
                    <br style="clear:left">
                </div>


            </div><!--page_content ends here-->
        </div>

        <div id="footer">
            Footer
        </div><!--end footer-->

</body>

</html>

CSS:

/* CSS layout */
*{
    padding:0;
    margin:0;
}
body {
    margin: 0;
    padding: 0;
}

#masthead {
    min-width: 600px;
}

#logo {
    float: left;
    width: 200px;
    background-color:yellow;/*I dont know what color this is in the template*/

}

#header {
        background-color:yellow;/*I dont know what color this is in the template*/
        height:300px;
}

#container {
    clear: both;
    min-width: 600px;

}

#left_col {
    float: left;
    width: 200px;
    background-color:red; /*I dont know what color this is in the template*/

}

#page_content {
    background-color:black; 
    margin:-50px 0 0 0;
    width:95%;
}

#footer {
    clear: both;
}
/* CSS common layout ends here*/

/* horizontalMainMenu starts here*/
#horizontalMainMenu{
    width:100%;
    background-color:transparent;
}
#horizontalMainMenu ul{
    margin:0;
    padding:0;
    float:left;
}
#horizontalMainMenu ul li{
    display:inline;
}
#horizontalMainMenu ul li a{
    float:left;
    text-decoration:none;
    color:white;
    padding:5px 9px;
}

/*horizontalMainMenu ends here*/

/*Body Menu Starts here*/

#horizontalBodyMenu ul{
    list-style:none;
}

#horizontalBodyMenu ul li{
    display:inline;
    }


/* horizontalBodyMenu ends here*/

#horizontalMainMenu ul li a:visited{
    color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
    color:#fff;
    background-color:#0b75b2;
}

#verticalMainMenu ul{
    margin:0;
    padding:0;
    list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
    padding:0 0 0 10px;
    background-image:url('');
    background-repeat:no-repeat;
    background-position:.5em;
    line-height:200%;
}
#verticalMainMenu li a:hover{
    color:#fff;
    background-color:#0b75b2;

}