CSS creating a background box

Hello,

How would one implement a background box. I've got a box setup by defining
a height. I want a box underneath the banner with the navbar kinda off to
the side. Here's what I've got it looking like right now
www.baum-hs.eu.dodea.edu

I don't want to use the height definition though because it looks different
and mesed up in Firefox. It like it to be a little bit longer than the Nav
bar. Is there a way I can make it so it automatically adjusts if my navbar
gets longer? Here's my CSS code:

/* CSS Document */
body {
background-repeat: repeat;
background-color: #000000;
background-image: url(../img/background.gif);
}

/*This centers the box through the page*/
#main {
position: relative;
width: 795px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
color: #6D1501;
border: 2px solid #000000;
z-index: 10;
height: 58em;
}

#banner{
position:inherit;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
z-index: 0;
}

#buc{
position:absolute;
z-index: 100;
left: -30px;
top: 77px;
background-color: #990000;
}

#linkheader{
border-bottom-color: #000000;
z-index: 10;
border: 2px solid #000000;
padding-bottom: -5px;
}

#leftnav{
position:absolute;
z-index: 10;
left: -81px;
margin-top: -2px;

}

#navbox{
border-bottom-style: solid;
border-bottom-color: #000000;
border-bottom-width: thin;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
width: 176px;
position: inherit;
}

#box{
border-bottom: 1px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
background-color: #FFD700;
width: 170px!important;
padding-top: 0px;
}

#box ul{
margin: 0px;
margin-left: 8px;
padding-top: 5px;
padding-bottom: 5px;
}

#box ul li {
margin-left: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.25em;
font-size: 0.75em;
}

#contactinfo{
border-bottom:medium ridge #681201;
}

Thanks in advance.

Radley

Sorry I mistyped the address www.baum-hs.eu.dodea.edu/beta3
RR


"RR" <radleyramirez (AT) t-online (DOT) de> wrote

Hello,

How would one implement a background box. I've got a box setup by
defining a height. I want a box underneath the banner with the navbar
kinda off to the side. Here's what I've got it looking like right now
www.baum-hs.eu.dodea.edu

I don't want to use the height definition though because it looks
different and mesed up in Firefox. It like it to be a little bit longer
than the Nav bar. Is there a way I can make it so it automatically
adjusts if my navbar gets longer? Here's my CSS code:

/* CSS Document */
body {
background-repeat: repeat;
background-color: #000000;
background-image: url(../img/background.gif);
}

/*This centers the box through the page*/
#main {
position: relative;
width: 795px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
color: #6D1501;
border: 2px solid #000000;
z-index: 10;
height: 58em;
}

#banner{
position:inherit;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
z-index: 0;
}

#buc{
position:absolute;
z-index: 100;
left: -30px;
top: 77px;
background-color: #990000;
}

#linkheader{
border-bottom-color: #000000;
z-index: 10;
border: 2px solid #000000;
padding-bottom: -5px;
}

#leftnav{
position:absolute;
z-index: 10;
left: -81px;
margin-top: -2px;

}

#navbox{
border-bottom-style: solid;
border-bottom-color: #000000;
border-bottom-width: thin;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
width: 176px;
position: inherit;
}

#box{
border-bottom: 1px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
background-color: #FFD700;
width: 170px!important;
padding-top: 0px;
}

#box ul{
margin: 0px;
margin-left: 8px;
padding-top: 5px;
padding-bottom: 5px;
}

#box ul li {
margin-left: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.25em;
font-size: 0.75em;
}

#contactinfo{
border-bottom:medium ridge #681201;
}

Thanks in advance.

Radley