Content Container Overlaps Menu?

Posted by Harold on Stack Overflow See other posts from Stack Overflow or by Harold
Published on 2010-06-17T01:33:39Z Indexed on 2010/06/17 8:43 UTC
Read the original article Hit count: 470

Filed under:

css

|

css-layout

|

css-positioning

I'm currently working on a Joomla template using CSS divs. I have a header set up with our logo image in a div floated to the left, an adspace floated to the right, and the menu bar on the bottom.

My content is divided into three div columns that are contained in "container.": the left column is floated left, the center is not floated, and the right is floated to the right.

The problem is the "container" for the three content divs is overlapping the menu, as you can see in this image: http://www.ndpstudentcouncil.org/images/shot1.png

Here's the HTML code:

> <body> <div id="backdrop">  <div
> id="wrapper">   <div id="header">
>    <div id="topimage">    </div>
>    <div id="adspace1"><jdoc:include
> type="modules" name="Ad Space #1" />
>    This will be the location for our
> "newsflash" items.    </div>
> 
>    <div id="ddtopmenubar"
> class="mattblackmenu">
>     <ul>
>     <li><a href="http://www.ndpstudentcouncil.org">Home</a></li>
>     <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
>     <li><a href="http://www.dynamicdrive.com/style/"
> rel="ddsubmenu2">CSS</a></li>
>     <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
>     <li><a href="http://tools.dynamicdrive.com/"
> rel="ddsubmenu3">Web Tools</a></li>
>     </ul>
>     <script type="text/javascript" src="js/ddlevelsmenu.js">
>     ddlevelsmenu.setup("ddtopmenubar", "topbar")
> //ddlevelsmenu.setup("mainmenuid",
> "topbar|sidebar")
>     </script>
>     <ul id="ddsubmenu1" class="ddsubmenustyle">
>     <li><a href="#">Item 1a</a></li>
>     <li><a href="#">Item 2a</a></li>
>     <li><a href="#">Item Folder 3a</a>
>      <ul>
>      <li><a href="#">Sub Item 3.1a</a></li>
>      </ul>
>     </li>
>     <li><a href="#">Item 4a</a></li>
>     <li><a href="#">Item Folder 5a</a>
>      <ul>
>      <li><a href="#">Sub Item 5.1a</a></li>
>      <li><a href="#">Item Folder 5.2a</a>
>       <ul>
>       <li><a href="#">Sub Item 5.2.1a</a></li>
>       <li><a href="#">Sub Item 5.2.2a</a></li>
>       </ul>
>      </li>
>      </ul>
>     </a>
>     </li>
>     <li><a href="#">Item 6a</a></li>
>     </ul>    </div>   </div>
>      <div id="container">    <script language="javascript">
>     matchHeight=function(){
>     var divs,contDivs,maxHeight,divHeight,d;
>     // get all <div> elements in the document
>     divs=document.getElementsByTagName('div');
>     contDivs=[];
>     // initialize maximum height value
>     maxHeight=0;
>     // iterate over all <div> elements in the document
>     for(var i=0;i<divs.length;i++){
>     // make collection with <div> elements with class attribute
> 'container'
>     if(/\bcontainer\b/.test(divs[i].className)){
>     d=divs[i];
>     contDivs[contDivs.length]=d;
>     // determine height for <div> element
>     if(d.offsetHeight){
>     divHeight=d.offsetHeight;
>     }
>     else if(d.style.pixelHeight){
>     divHeight=d.style.pixelHeight;
>     }
>     // calculate maximum height
>     maxHeight=Math.max(maxHeight,divHeight);
>     }
>     }
>     // assign maximum height value to all of container <div> elements
>     for(var i=0;i<contDivs.length;i++){
>     contDivs[i].style.height=maxHeight;
>     }
>     }
>     // execute function when page loads
>     window.onload=function(){
>     if(document.getElementsByTagName){
>     matchHeight();
>     }
>     }
>     </script>    <div id="left">
>     <jdoc:include type="modules" name="left" />    </div>    <div
> id="middle">
>     <jdoc:include type="component" />    </div>    <div id="right">
>     <jdoc:include type="modules" name="right" />
>     </div>
>   </div>
>      <div id="footer" class="clear"><jdoc:include
> type="modules" name="footer" />
>    &copy; 2010 NDP Student Council<br
> />Website Development Subcommitee
>   </div>  </div> </div> </body>

The CSS:

> #backdrop {   width:100%;  height:100%;  background: #FFFFFF
> url(../images/gradient.jpg) repeat-x;
> }
> 
> #wrapper {  margin:auto;  width:95%;  height:95%;  border-right:thick solid
> black;  border-bottom:thick solid
> black;  border-top:thick solid black;
>  border-left:thick solid black;
>  background-color:white; }
> 
> #header {  height:131px;  width:100%;  background-color: #FFFFFF;
>  border-bottom:thick solid black; }
> 
> #topimage {  float:left;  height:131px;  width:63%;
>  background-image:
> url("../images/ndps2.png");
>  background-repeat:no-repeat; }
> 
> #adspace1 {  float:right;  width:27%;  height:131px; }
> 
> #container {  clear:both; }  
> #left{  width:20%;  float:left;  padding:5px;  text-align:center;  }
> 
> #middle{  width:60%;  padding:5px;  text-align:center;  }
> 
> #right{  float:right;  width:20%;  padding:5px;  text-align:right;  }  
> #footer {  border-top:thick solid black;  width:100%;
>  text-align:center; }   .clear {
>  clear:both;  }

Here is the CSS for the menu itself, which is from DynamicDrive.com:

> .mattblackmenu ul{ margin: 0; padding:
> 0; font: bold 12px Verdana;
> list-style-type: none; border-bottom:
> 1px solid gray; background: #414141;
> overflow: hidden; width: 100%;
> clear:both; }
> 
> .mattblackmenu li{ display: inline;
> margin: 0; }
> 
> .mattblackmenu li a{ float: left;
> display: block; text-decoration: none;
> margin: 0; padding: 6px 8px; /*padding
> inside each tab*/ border-right: 1px
> solid white; /*right divider between
> tabs*/ color: white; background:
> #414141;

Thanks for the help!

Developer IT