Text flowing out of div

**foshan** · Jan 5, 2013 02:57

Hi all,
I am practicing my CSS layout but have come across a problem in that when i write a lot of text on one line it continues into the next div. I would be grateful if someone could tell me why this is happening.
Here is my code

HTML

Code:

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="primary.css">
	
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<h1>CSS Practice</h1>
			</div>
		<div id="nav">
			<ul>
				<li><a href="#">home</a></li>
				<li><a href="#">tutorials</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
		<div class="clear"></div>
		<div id="leftfloat">
		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
		<div id="rightfloat">Right Float</div>
		<div class="clear"></div>
		<div id="footer">This is the footer</div>
		</div>
	
	</body>
</html>

CSS

Code:

body, h1 {
margin:0;
padding:0;
}

#wrapper {
background-color:#fff;
width:960px;
margin:0 auto;
}
#header {
height:50px;
border-bottom:1px solid #ccc;
}
#nav ul{
list-style:none;
}
#nav li {
float:left;
}
.clear {
clear:both;
}

#leftfloat {
width:459px;
min-height:400px;
padding:10px;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
float:left;
}

#rightfloat {
width:460px;
min-height:400px;
padding:10px;
float:right;
border-top:1px solid #ccc;
}

#footer {
border-top:1px solid #ccc;
}

**eis** · Jan 5, 2013 03:19

perhaps add:
overflow:scroll;
in the div.

**foshan** · Jan 5, 2013 03:35

Thanks for the input eis but this doesn't work as creates a scroll as in a text box which i do not want.

**Paul O'B** · Jan 5, 2013 05:32

Hi,

I don't know many words that are this long i.e. "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"

You have to treat unbroken text much the same as if you had put an image in that section that is 600px wide. i.e. just don't do it . If it was a dynamic environment where you had no control you should be trapping input anyway and truncating as you go.

However, these days you can use "word-wrap:break-word;" to break unbroken text at the boundaries as the modern browsers now support it

Code:

#wrapper {
	background-color:#fff;
	width:960px;
	margin:0 auto;
	word-wrap:break-word;
}

It was previously proprietary IE only code but has now been incorporated into the specs and supported in the latest browsers versions.

A couple of pointers in your code:

Don't add divs where none are needed.

e.g.

Code:

<div id="nav">
				<ul>
						<li><a href="#">home</a></li>
						<li><a href="#">tutorials</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Contact Us</a></li>
				</ul>
		</div>

The div is superluous unless you have multiple backgrounds being applied.

The ul is a perfect container.

Code:

<ul id="nav">
 <li><a href="#">home</a></li>
 <li><a href="#">tutorials</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Don't use empty clearers.

Code:

<div class="clear"></div>

Most of the time they are not needed as you could simply have set the footer to clear:both in your example anyway. For the nav you should contain the floats using a mechanism that doesn't need structural markup such as using overflow:hidden on the ul where visible overflow is not required or alternatively the revised clearfix method.

**foshan** · Jan 5, 2013 06:19

Thanks for the very informative reply Paul O'B. I was just testing the min-height rule and didn't realise that if you use unbroken text it would overflow out of the div. I will also correct the other issues that you have pointed out. Thanks once again.

Originally Posted by Paul O'B

Hi,

I don't know many words that are this long i.e. "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"

You have to treat unbroken text much the same as if you had put an image in that section that is 600px wide. i.e. just don't do it . If it was a dynamic environment where you had no control you should be trapping input anyway and truncating as you go.

However, these days you can use "word-wrap:break-word;" to break unbroken text at the boundaries as the modern browsers now support it

Code:

#wrapper {
	background-color:#fff;
	width:960px;
	margin:0 auto;
	word-wrap:break-word;
}

It was previously proprietary IE only code but has now been incorporated into the specs and supported in the latest browsers versions.

A couple of pointers in your code:

Don't add divs where none are needed.

e.g.

Code:

<div id="nav">
				<ul>
						<li><a href="#">home</a></li>
						<li><a href="#">tutorials</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Contact Us</a></li>
				</ul>
		</div>

The div is superluous unless you have multiple backgrounds being applied.

The ul is a perfect container.

Code:

<ul id="nav">
 <li><a href="#">home</a></li>
 <li><a href="#">tutorials</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Don't use empty clearers.

Code:

<div class="clear"></div>

Most of the time they are not needed as you could simply have set the footer to clear:both in your example anyway. For the nav you should contain the floats using a mechanism that doesn't need structural markup such as using overflow:hidden on the ul where visible overflow is not required or alternatively the revised clearfix method.

User Tag List

Thread: Text flowing out of div

Thread Tools

Display

Text flowing out of div

Bookmarks

Bookmarks

Posting Permissions