0

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: n/a

3
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by Kraai
0

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.

0

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.

0

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

0

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;
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.