New to Web Design: 'div' tags not 'containing' their content properly

M

mrskill

New Member
Hi, my problem is that when a new 'div' tag shunts a pre-existing one further down the page, only the old div's content moves - the div itself stays in the same place. Here is a picture of an example:

http://i303.photobucket.com/albums/nn134/mr-skill/Picture22.png

The main box with the semi-opaque black background is a div called 'gallery'. I've inserted a navbar above this in it's own div, visible dimly behind the top of 'gallery'.

The navbar has shunted the content of 'gallery' (6 pictures with captions) downwards, whilst 'gallery' itself has stayed in place. How do you make sure a div + its content will behave 'as one'? Help much appreciated, thanks.

(Below is the relevant code. The CSS for the navbar is in an external style sheet, and displayed seperately)

PHP: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="../overall.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.mugshots {
    padding: 10px;
}
#gallery {
    width: 673px;
    margin-right: auto;
    margin-left: auto;
    height: 170px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #000000;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic1 {
    width: 112px;
    height: 163px;
    left: 0px;
    top: 0px;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic2 {
    width: 112px;
    height: 163px;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic3 {
    width: 112px;
    height: 163px;
    position: relative;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic4 {
    width: 112px;
    height: 163px;
    position: relative;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic5 {
    width: 112px;
    height: 163px;
    position: relative;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
#pic6 {
    width: 112px;
    height: 163px;
    position: relative;
    float: left;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
}
body {
    background-attachment: fixed;
    background-image: url(../images/origs/deadelvisfw.png);
    background-position: center center;
    background-repeat: no-repeat;
}
.leftmargin {
    margin-left: 10px;
}
-->
</style>
</head>

<body>
<div id="container">
  <div id="masthead">
    <h1>Dead Elvis</h1>
  </div>
  
  <div id="bozzle"><div align=center id="navbartop"><a href="../home/index.html" title="Home">Home</a> : <a href="../about/index.html" title="About">About</a> : <a href="../news/index.html">News</a> : <a href="index.html" title="Records">Records</a> : <a href="../pictures/index.html" title="Pictures">Pictures</a> : <a href="../contact/index.html" title="Contact">Contact</a> : <a href="../links/index.html" title="Links">Links</a> : <a href="../live/index.html" title="Live">Live</a></div></div>
  <div id="main">
    <div id="gallery">
      <div class="normtypecentre" id="pic1">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
          <span class="uppercasenormtcentre">James <br />
          Harker   </span></div>
      <div class="normtypecentre" id="pic2">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
           <span class="uppercasenormtcentre">Rae <br />
           Hicks     </span></div>
      <div class="normtypecentre" id="pic3">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
      <span class="uppercasenormtcentre">Louis <br />
      Lanfear  </span></div>
      <div class="normtypecentre" id="pic4">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
      <span class="uppercasenormtcentre">Jamie <br />
      Lees     </span></div>
      <div class="normtypecentre" id="pic5">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
      <span class="uppercasenormtcentre">Sam <br />
      Prentice    </span></div>
      <div class="normtypecentre" id="pic6">
       <img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
      <span class="uppercasenormtcentre"> Davide Santi-Brooks</span></div>
    </div>
    </div>
  </div>
</div>
</body>
</html>

PHP: 
#navbartop {
    background-color: #000000;
    opacity:0.80;
    -moz-opacity:0.80;
    filter:alpha(opacity=80);
    width: 510px;
    margin-left: 19.75%;
    height: 1.2em;
    float: left;
}
 
You must log in or register to reply here.
Top