Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

When content in DIV box extends vertically, the DIV box itself does not

Go here to see what I mean
http://www.mybiblegames.com/community.php
The tests at the bottom are inside the same DIV tag as the top ten stats but yet the DIV box does not extend with them, how can I fix this?

Attached is the CSS code
@charset "utf-8";
/* CSS Document */
 
* {
		margin: 0 auto;
}
 
html{
height:100%;
}
 
body{
	background-image:url('images/background.png');
	background-position:center;
	background-attachment:fixed;
	text-align:center;
	background-position:bottom;
	vertical-align:top;
	border:none;
	border-width:0;
	margin:0;
	padding:0;
	margin-top:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	height:100%;
	margin: 0 auto;
}
 
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -38px; /* the bottom margin is the negative value of the footer's height */
	background-image:url('images/backgroundBottomWhite.gif');
	width:764px;
}
 
 
.siteFrame{
	border:none;
	border-width:0;
	width:764px;
	padding:0;
	text-align:left;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	background-image:url('images/header.jpg');
	background-position:top;
	background-repeat:no-repeat;
	background-color:white;
	margin: 0 auto;
}
 
 
 
/* Links */
a{
	color:#b0a310;
	font-weight:bold;
	text-decoration:underline;
}
a:hover{
	color:#7e896e;
	text-decoration:overline underline;
}
a:active{
	color:#426ae1;
	text-decoration:none;
}
a:visited{
	color:#897f0c;
}
 
 
 
/* Formated Text */
.contentSmallTitle{
	font-size:12px; 
	font-weight:bold; 
	color:white;
}
 
 
 
/* A content Box that fills the entire page horizontally */
.contentBox{
	background-image:url('images/contentBorder.png'); 
	width:754px;
}
.contentBoxInside{
	background-color:white; 
	width:740px; 
	text-align:left; 
	padding:4px;
}
.contentBoxShadow{
	width:754px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.bibleVerse{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	text-align:center;
}
 
 
 
/* A content box with a left side menu */
.contentMenuBox{
	background-image:url('images/contentBorder.png'); 
	width:754px;
}
.contentMenu{
	width:173px;
	color:white;
	font-weight:bold;
	padding:4px;
	text-align:left;
	float:left;
	margin-left:3px;
	margin-top:-5px;
}
.contentMenuBoxInside{
	background-color:white; 
	width:556px;
	height:250px;
	text-align:left; 
	padding:4px;
	margin-right:5px;
	line-height:1.3;
	word-spacing:1.2px;
	background-image:url('images/menuContentBackground.png');
	background-repeat:repeat-y;
}
.contentMenuBoxShadow{
	width:754px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
li a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 20px;
	text-decoration: none;
	font-weight:normal;
}	
 
li a:link, li a:visited {
	color: #baccde;
	display: block;
	background: url(images/menuLinkBackground.png);
	background-repeat:no-repeat;
	padding: 6px 0 0 8px;
	font-weight:bold;
}
a.menuLink{
	text-decoration:none;
	width:173px;
	height:20px;
	color:white;
}
li a:hover{
	background: url(images/menuLinkBackgroundHover.png);
	color:#ccce92;
	background-repeat:no-repeat;
	padding: 6px 0 0 8px;
}
 
.communityStatistics{
font-weight:bold;
color:#bbbbbb;
font-size:14px;
}
.communityStatisticsRight{
color:black;
font-size:12px;
}
 
 
 
 
/* A divided Content Box */
.divContentBox{
	width:765px;
}
.divLeftBox{
	margin: 0 0 0 5px; 
	float:left;
	width:374px;
}
.divLeftBoxBorder{
	background-image:url('images/contentBorder.png'); 
	width:374px;
}
.divLeftBoxInside{
	background-color:white; 
	width:360px; 
	height:262px; 
	text-align:left; 
	padding:4px;
}
.divLeftBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.divRightBox{
	margin: 0 0 0 379px;
}
.divRightBoxBorder{
	background-image:url('images/contentBorder.png'); 
	background-position:right; width:374px;
}
.divRightBoxInsideNonPadded{
	background-color:white; 
	width:368px; 
	text-align:left;
}
.divRightBoxInside{
	background-color:white; 
	width:360px; 
	text-align:left; 
	padding:4px;
}
 
.divRightBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
 
 
 
 
/* Games Sorted Profile Box */
.gameProfileBox{
	background-color:#002244;
	width:250px;
	font-weight:bold;
	overflow-x: hidden;
}
.gameProfileBoxInside{
	/*background-color:#336699;*/
	background-image:url('images/sortedGamesFrame.png');
	width:244px; 
	text-align:center;
	padding:1px; 
	color:#c9d0d7;
}
.gameProfileBoxShadow{
	width:250px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.gameProfilePicture{
	width:120px;
	height:100px;
	margin:1px;
}
 
 
/* A header Box that fills the entire page horizontally but at the top*/
.headerBoxTitle{
	background-image:url('images/headerBoxTop.gif');
	width:412px;
	height:33px;
	text-align:center;
	vertical-align:bottom;
	font-size:18px;
	letter-spacing:2px; 
	font-weight:bold; 
	color:black;
}
.headerBoxTitlePadded{
	height:33px;
	padding-top:10px;
}
.headerBoxContent{
	width:764px;
	background-image:url('images/headerBoxContent.gif');
	background-position:center;
	background-repeat:repeat-y;
	text-align:center;
	vertical-align:top;
}
.headerBoxContentPadded{
	width:720px;
	text-align:left;
}
 
 
/* Footer Related */
.footer{
	background-position:bottom;
	width:764px; 
	background-image:url('images/footerBackground.gif');
	background-repeat:repeat-x;
	height:38px;
	color:#cccbe7;
	font-size:12px; 
	vertical-align:bottom;
	line-height:1;
	margin: 0 auto;
}
.push {
	height: 38px; /* .push must be the same height as .footer */
}
a.footerLinks{
	color:#e0ddc0;
	font-weight:bold;
	text-decoration:none;
}
a:hover.footerLinks{
	color:#c0c2e0;
	text-decoration:none;
}

Open in new window

0
davideo7
Asked:
davideo7
1 Solution
 
brundoCommented:
Hi,

in line 130 you have height:250px.

If you delete that line, the div element with class .contentMenuBoxInside will extend over test...test...test text.
0
 
David S.Commented:
You set a height on ".contentMenuBoxInside" which is insufficient to hold all of its content, hence the content is overflowing. Simply remove the height declaration or use min-height instead.
0
 
davideo7Author Commented:
The min-height did the trick!  Thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now