Text overlapping div

ryan1234 · 12-06-2012, 05:33 PM

I currently have a paragraph within a div, but the paragraph overlaps the div and onto another part of the web page. How do I stop this?

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AFC Wimbledon Blog Template</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<div id="wrap">
<div id="leftcontent">
<p>
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</p>
<p>
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</p>
<p>
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</p>
</div>
<div id="rightcontent">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
</div>
</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body
{
	margin: 0px;
	padding: 0px;
}
	
#header
{
	margin: 0 auto;
	width: 900px;
	height: 142px;
	background:url(images/basicTemplate_header.gif) no-repeat;
}

#wrap
{
	margin: 0 auto;
	width: 900px;
	height: 800px;
	background:url(images/basicTemplate_bg.gif) repeat-x;
}

#leftcontent 
{
	float: left;
	margin: 0 0 0 50px;
	width: 650px;
	height: 750px;
	background:url(images/basicTemplate_content.gif) repeat-y;
}

#rightcontent
{
	float: right;
	width: 250px;
	height: 750px;
}

#image1
{
	background:url(images/basicTemplate_image1.gif) no-repeat;
	margin: 0 0 0 10px;
}

#image2
{
	clear:both;
	background:url(images/basicTemplate_image2.gif) no-repeat;
	margin: 0 0 0 10px;
}

#image3
{
	clear:both;
	background:url(images/basicTemplate_image3.gif) no-repeat;
	margin: 0 0 0 10px;
}

#leftcontent p
{
	
}

COBOLdinosaur · 12-06-2012, 06:49 PM

There are no spaces so the line cannot break to a new line. The over flow can be controlled with:
overflow-x:hidden // which will truncate the data
OR
overflow-x:scroll // that will generate a scrollbar for the element.

If you want to break the line, then yo could insert <wbr> tags at intervals within the string.