Text outside of div

[manda]

Hi, I'm an absolute newbie to css so I do apologise if this seems very simple but I can't figure it out. The problem is that any long text goes beyond the div, how do I get the div to fit to the amount of text? Also, the wrapper only goes half way down the page when it is set to 100% and I'd like it to go all the way to the bottom so the colour of it can be seen. Here is the code (hopefully):

html, body{
	background-color: #C33;
	margin: 0px;
	height: 100%;
}


#wrapper {
	width: 1024px;
	background-color: #000;
	height:100%;
	min-height:100%;
	margin: 0 auto;
	overflow:visible;
	border-radius: 5px;
	-moz-border-radius: 5px;


}
#header {
	height: 150px;
	width: 1024px;
	background-color: #000000;
	border-radius: 5px;

	-moz-border-radius: 5px;
	background-image:url(Images/title2.jpg);
	background-repeat:no-repeat;
	background-position: 50% 50%;

}
#navbar {
	height: 35px;
	width: 1024px;
	background-color: #D6D6D6;
	border-radius: 5px;
	-moz-border-radius: 5px;
	margin-bottom: 3px;
}

#left {
	float: left;
	height: 100%;
	width: 24%;
	background-color: #000;
	margin-bottom: 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	margin-right: 5px;
}
#middle {
	height: 100%;
	min-height:100%;
	width: 51%;
	background-color: #FFF;
	float: left;
	margin-bottom: 3px;
.
	border-radius: 5px;
	-moz-border-radius: 5px;
	font-family: Verdana, Geneva, sans-serif;
}
#right {
	float: right;
	height: 100%;
	width: 24%;
	background-color: #000;
	margin-bottom: 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
}


#footer {
	height:30px;
	width:1024px;
	background-color:#D6D6D6;
	clear:both;
	margin-right:auto;
	margin-left:auto;
	margin-top:-30px;
	margin-bottom:-30px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	
	}
	
	
	#navbar ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#navbar ul li {
	display: inline;
}
#navbar ul li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	float: left;
	padding-top: 7px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
}
#navbar ul li a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
	padding-top: 7px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;
	background-color: #999999;
}

[miennh_coding]

html?

[sunfighter]

manda I do not see these behaviors, but you need to give us the HTML code and tell us what div your having problems with. And what browsers have you looked at your page with.

[teedoff]

We do need your html code, but in the mean time, try instead of setting a height on wrapper, set

overflow: auto;

on wrapper.

[clausrei]

Or :

overflow:hidden

Or delete the #wrapper attribute for height:

 height: 100%;

This should do the job.

[Co1dFusion]

The problem is that you have specfied the height of the div. remove that and the div will just fit the text.