Home/ Questions/Q 5993005
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:36:48+00:00

I have a relatively simple HTML layout where a div is meant to be

  • 0

I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.

But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id ‘main’ to be displayed over the top of the img with the id ‘mainImg’ (but the div also needs to be/remain centred).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kamalei - Home Page</title>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        #mainImg  { z-index: -1; }
        #main     { text-align: center; width: 1000px; height: 700px; top: 0px; }
        #navBar   { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
        #content  { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
    -->
    </style>

</head>

<body>

    <div id="heading"> 
        <img src="images/heading.png" alt="" width="100%" height="300px"/>
    </div>

    <img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>

    <!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
    <div id="main">
        <div id="navBar">
            <img src="images/navBackground.png" alt="" width="100%" height="700px"/>
        </div>

        <div id="content">
            <img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
        </div>
    </div>

</body>
<!-- InstanceEnd -->
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.

    • 0