CSS Forum

**abranaugh** · 05-31-2010, 10:32 PM

I am creating a webpage for our DECA organization on campus and I am trying to create a drop down menu and the content to fit into the area. Right now I have this: http://uwwdeca.org/newLayout/

Now my problem is when you scroll over executive board, the sidebar shifts over to where the drop down ends. To fix this I set the sidebar position to absolute, but then some content goes beyond the bottom of the division and the division doesn't change based on the content given. Any help is appreciated, I am adding in both the html file and the css file
Also when I clear:both in the sidebar division then when I go over executive board, the content doesn't start until where the drop down ends.

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>UWW DECA</title>
 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
 <div id="wrapper">
    <div id="header">
   UW-Whitewater DECA!
  </div>
     <div id="navigation">
      <ul>
          <li><a href="#">Home</a></li>
         </ul>
         <ul>
          <li><a href="#">Membership</a>
              <ul>
               <li><a href="#">Weekly Minutes</a></li>
                  <li><a href="#">Officer Application</a></li>
              </ul>
                </li>
         </ul>
         <ul>
          <li><a href="#">Executive Board</a>
           <ul>
                     <li><a href="#">Brandon Narveson</a></li>
                        <li><a href="#">Mellisa Rudig</a></li>
                        <li><a href="#">Sarah Neville</a></li>
                        <li><a href="#">Nathan Lipton</a></li>
                        <li><a href="#">Kyria Smith</a></li>
                        <li><a href="#">Adam Branaugh</a></li>
                        <li><a href="#">Alison Mueller</a></li>
             </ul>
             </li>
         </ul>
         <ul>
          <li><a href="#">Pictures</a></li>
         </ul>
         <ul>
          <li><a href="#">Calendar</a></li>
         </ul>
         <ul>
          <li><a href="#">Contact Us</a></li>
        </ul>
 
  </div>
  <div id="content-mid">
        <div id="content-end">
        <div id="content">
   <div id="sidebar">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum aliquet sapien, quis imperdiet lacus tempus non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque mi erat, tempus non ultricies quis, venenatis sed purus. Pellentesque commodo vulputate sem, a molestie dui pretium ac. Aliquam varius tempor pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin arcu elit, dictum non lacinia ac, lacinia non leo. Donec lobortis volutpat neque, non accumsan nisl adipiscing sed. Cras non dolor tellus. Donec id erat vitae massa pulvinar fringilla at ut mauris. Cras laoreet interdum mauris. 
   </div>
   <div id="empty"></div>
        </div>
        </div>
  </div>
  </div>
    <div id="footer">
    </div>
</body>
</html>

style.css

Code:

html 
{
 background: #efefea;
 height: 100%
}
body 
{
 background: url(images/background.gif) repeat-x;
 height: 100%;
 margin: 0;
 padding: 0;
 min-width: 960px;
}
#wrapper
{
 width: 960px;
 margin: 0px auto;
 min-height: 100%;
 position: relative;
 margin-bottom: -120px;
}
#header 
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24pt;
 height: 120px;
 color: #FFFFFF;
 height: 120px;
}
 
#navigation
{
 height: 48px;
 margin: 0px auto;
 width: 100%;
}
#navigation ul
{
 list-style: none;
 margin:0;
 padding: 16px 0 0;
 float: left;
}
#navigation a
{
 border-right: 1px solid #a7a7a7;
 width: 140px;
 padding-top: 14px;
 margin: -16px 41px 0px -41px;
 display: block;
 height: 34px;
 color: #626262;
 text-align: center;
 text-decoration: none;
 font-size: 18px;
}
#navigation a:hover
{
 background: #c5c5c1;
}
#navigation ul ul
{
 z-index: 500;
 display: none;
}
#navigation ul li:hover ul
{
 display: block;
 background: #dddddd;
 margin-left: -41px;
 padding-top: 0px;
}
#navigation ul li:hover ul a
{ 
 margin: 0;
 padding: 3px 0px 1px;
 height: 25px;
 font-size: 14px;
}
#content
{
 margin-top: 58px;
 background: url(images/content_background.gif) no-repeat 0 0;
 padding-bottom: 25px;
 min-height: 450px;
}
#content-mid
{
 background: url(images/content_mid.gif) repeat-y;
}
#content-end
{
 background: url(images/content_end.gif) no-repeat 0 bottom;
}
 
#sidebar 
{
 width: 175px;
 float: left;
 padding-top:12px;
 padding-left:11px;
 overflow: auto;
}
#main-content
{
 float: right;
}
#empty
{
 clear: both;
}
#footer
{
 clear: both;
 margin-top: 25px;
 background: #2b2b2b;
 position: relative;
 min-height: 120px;
}

**wongpk** · 06-01-2010, 12:25 AM

You need to position your navigation.

Add position: relative; on the first level and position: absolute; on second level drop down.

**abranaugh** · 06-01-2010, 12:33 AM

Thank you very much. I grealy appreciate it. I just got a general question, do you have to position every division? Or are there certain times when you use a position statement and when you dont?

**Phunk Rabbit** · 06-01-2010, 03:59 AM

Abranaugh, you will generally float most divs, possitioning using the possition attribute should be used sparingly and only when really required.