Home/ Questions/Q 6005207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:22:04+00:00

I have a very simple HTML layout where a vertical navigation bar should sit

  • 0

I have a very simple HTML layout where a vertical navigation bar should sit to the left of a Content div. And both elements should be centred horizontally.

I have set the CSS code to make it layout like so, but it is not displaying the way I said above. The way it actually looks is the navbar sits to the left (x=0) & the content div sits below that navbar also on the absolute left.

What am I doing wrong?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<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; } 

        body { text-align: center; min-width: 1200px; }

        /* ID elements */
        #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

        #heading        { height: 300px; padding-top: 30px; }
        #main           { display: inline; }
        #navBar         { height: 700px; width: 200px; background: url("images/navBackground.png") no-repeat; } 
        #content        { height: 700px; width: 800px; background: url("images/contentBackground.png") no-repeat; }

        #navLinks           { font: 100%/1.4 'Segoe Print'; font-weight: bold; list-style-type: none; }
        #navLinks ul, li, a { color: white; }

        /* Classes */
        .hidden         { display: none; }
        .unhidden       { display: block; }
    -->
    </style>

</head>

<body>

    <div id="heading"> 
        <img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
    </div>

    <div id="main">
        <div id="navBar">

        </div>

        <div id="content">
        </div>
    </div>


    <!-- Must keep the background image at the bottom of body -->
    <img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>

    <script type="text/javascript">
    <!--
        window.onresize = setBackgroundImgWidth;
    -->
    </script>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to either float or position #navBar and #content. I’d go with float:

    #navBar { float:left; height: 700px; width: 200px; background: url("images/navBackground.png") no-repeat; }
#content { float:left; height: 700px; width: 800px; background: url("images/contentBackground.png") no-repeat; }

    For centering, you need to do the following to #main:

    #main { display: block; width:1000px; margin:0 auto }

    Centering works by defining a width for an element and applying “auto” to left and right margins.

    • 0