Click to See Complete Forum and Search --> : Small bit of CSS help please


HappyFace19
11-14-2008, 11:23 AM
Hello, could somebody have a quick look at my css code for me please, and help me with this problem. What i am trying to do, is have my content box (content area) the same height as my menu. At the moment the content area expands when you put text or data in, I would like it to be a set size, matching up with the bottom of my menu.

The header and the contentarea boxes also stretch and shrink to fit the page, depeding on the screen size. That is fine, but i would like it to be a set size for height.

Hope i am explaining this correctly. Here is a screen shot of my page, note the small contentarea box, as it has no data in..... need it to match up with my menu. CSS attached also. Thanks

http://img399.imageshack.us/my.php?image=webpageiu5.jpg



/***** General ************************************************************************/
a:link {
color: #000000;
}

a:visited {
color: #000000;
}

a:hover {
text-decoration: none;
}

a.pagelink:visited {
color: #CCFFFF;
}

body {
background-color:#CCCCCC
font-family:Arial, Helvetica, sans-serif;
margin: 0 0;
padding: 18px 28px;
}

p {
text-align: justify;
margin: 0 0;
}

p.noheight {
line-height: 1.12em;
}

p.return {
text-align: right;
}

span.uline {
text-decoration: underline;
}

ul {
text-align: justify;
}

/* Note: Compensates for IE acronym dotted underline bug */
acronym {
border-bottom: 1px dotted #000000;
cursor: help;
}

div#top {
position: absolute;
top: 0;
}

/***** Header *************************************************************************/
div#header {
background-color:#FFFFFF;
border: 3px solid #000000;
padding: 5px 10px 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
width: auto;
}

/* Note: Optional Ad Banner Area (remove if not using banner image at all) */
div#header img{
border: 0px solid #000000;
float: right;
margin: 5px 0 0 10px;
/*width: 468px;
height: 60px;*/
}

div#header h1 {
color: #0072BC;
cursor: default;
font-size: 40px;
margin: 5px 0 0 5px;
width: auto;
font-family: Arial, Helvetica, sans-serif;
/*width: 365px;*/
}

div#header h2 {
color: #414141;
cursor: default;
font-size: 25px;
margin: 5px 0 0 5px;
/*width: 365px;*/
width: auto;
font-family: Arial, Helvetica, sans-serif;
}
div#header h3 {
color: #414141;
cursor: default;
font-size: 15px;
margin: 5px 0 0 5px;
/*width: 365px;*/
width: auto;
font-family: Arial, Helvetica, sans-serif;
}

apDiv1 {
color: #0072BC;
cursor: default;
font-size: 40px;
margin: 5px 0 0 5px;
width: auto;
right:auto;
}

/***** Side Bar (general) *************************************************************/
.topgap {
margin-top: 10px;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

.btmgap {
margin-top: 2px;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;

}

div.separator {
margin-top: 6px;
}

/***** Left Side Bar ******************************************************************/
div#lsidebar {
font-family:Arial, Helvetica, sans-serif;
float: left;
width: 185px;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
}

div#lsidebar p {
text-align: left;
}

/***** Nav Menu (position at top of either side bar) **********************************/
div.nmenu {
font-size: 13px;
font-weight: bold;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
}

div.nmenu span {
background-color:#000000;
border: 3px solid #000000;
color: #FFFFFF;
cursor: default;
display:block;
text-decoration: none;
padding: 6px 16px;
width:auto;
}

div.nmenu a {
background-color: #FFFFFF;
border: 3px solid #000000;
display: block;
padding: 3px 10px;
width: auto;
}

div.nmenu a:visited {
color: #00478D;
}

div.nmenu a:hover {
background-color: #0072BC;
border-color: #000000;
color: #FFFFFF;
}

/***** Side Info (position at bottom of left side bar or anywhere on right side bar) **/
div.sidenews {
background-color: #c0c0c0;
border: 1px solid #00478D;
font-size: 13px;
padding: 3px 10px;
width: auto;
}
div.sideinfo {
background-color: #FFFFFF;
border: 1px solid #00478D;
font-size: 13px;
padding: 3px 10px;
width: auto;
}


/***** Content Area *******************************************************************/
div#contentarea {
padding-left: 195px;
padding-right: 0px;
padding-bottom: 700px;
}

div.title {
background-color: #FFFFFF;
border: 1px solid #00478D;
color: #00478D;
font-family: sans-serif, "Times New Roman", Times, sans-serif;
font-size: 13px;
font-weight: bold;
padding: 3px 10px;
margin-top: 10px;

}

div.content {
margin-top: 10px;
background-color: #FFFFFF;
padding: 6px 10px;
border: 3px solid #000000;

}
div.img {
border: 0px solid #000000;
vertical-align: middle;
margin: 5px 0 0 10px;
width: 468px;
height: 60px;
}
img.displayed {
display: block;
margin-right: 0px;
padding:10px
}
#footer {
position:absolute;
background-color: #FFFFFF;
padding-left: 150px;
padding-right: 0px;
border: 3px solid #000000;
z-index:1;
}

jasonahoule
11-14-2008, 11:28 AM
Why don't you just set a height for div#contentarea?

HappyFace19
11-14-2008, 11:48 AM
Yep, got it ... I set the height in div.content.

Thanks