Member Avatar for trpsjt2008

My Problem is
Text is not wrapping when it at the end of the line it break through the border of the div
My CSS:

html,body {
	margin:0;
	padding:0;
	height:100%;
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}

h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}
	h1, h2, a {
		color:orange;
	}

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#container {
	position:relative; 
	margin:0 auto; 
	width:800px;
	height:100%; 

}
.dsLeft{
	background:url(img/ds.png);
	position:relative; 
	margin:0 auto; 
	height:auto !important; 
	height:100%; 
	min-height:100%;
	float:left;
	width:20px;
}
.dsRight{
	background:url(img/ds2.png);
	position:relative; 
	margin:0 auto; 
	height:auto !important; 
	height:100%; 
	min-height:100%;
	float:left;
	width:20px;}
div#content {
	margin:0 auto; 
	width:760px;
	float:left;
	background:url(img/bgw.png);
	height:auto !important; 
	height:100%; 
	min-height:100%; 
}

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>CSS Layout - 100% height</title>
	<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>

<div id="container">
		<div class='dsLeft' >
        </div>
		<div id="content">	 
		  <p>sdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddssssssssssssssssssssssssssssasdasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadasd</p>
</div>
         <div class='dsRight' id='fullH'>
         
     </div>
</div>

</body>
<body>
</body>
</html>

THX

Edited by trpsjt2008 because: n/a
  • 3 Contributors
  • 5 Replies
  • 135 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Kraai
Member Avatar for Kraai

Hi

Your browser tries to be loyal to you, and renders a very long word, without breaking it up, because the browser does not know where to break up such a long word.

To be able to not breaking over the div, you need to set an overflow here:

div#container {
	position:relative; 
	margin:0 auto; 
	width:800px;
	height:100%;
        clear:left;
        float:left;
        font-family:arial,sans-serif;
	font-size:small;
	color:#666;
        overflow:auto;

overflow: auto; will create a scroll bar to be able to scroll the long word. Note, I also included your text font settings in that div as it will have no effect on your text if only called in the body part.

When you break up your long word into normal words and paragraphs, your text will wrap automatically without scrollbar to be visible.

Member Avatar for trpsjt2008

did it have anyother way to wrap the line without whitespace

Member Avatar for drjohn

Try putting a few spaces into that monster long "word" and you'll soon see things are okay! It's your test "word" that is the problem!!! Not the code. Never test a layout with a word like that.

Member Avatar for trpsjt2008

i know that but is there anyway to wrap the long word without left space if it can't
just nerver mind and i will mark this thread as solved . Thanks

Member Avatar for Kraai

OK, I may have a solution for you, but I am not sure if it will work in all browsers, but it works in IE7 FF and Chrome.

Use this: word-wrap: break-word;

Like this:

div#container {
	position:relative; 
	margin:0 auto; 
	width:800px;
	height:100%;
        clear:left;
        float:left;
        font-family:arial,sans-serif;
	font-size:12px;
	color:#666;
        overflow:auto;
        word-wrap: break-word;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.