PDA

View Full Version : how do i make my text from running out of the div when i type


silverglade
09-03-2008, 09:19 PM
how do i make my text from running out of the div box when i type? any help greatly appreciated. thanks. derek

domedia
09-03-2008, 09:48 PM
It shouldn't. You're probably not typing inside the DIV.

silverglade
09-03-2008, 09:58 PM
thte two sidebars divs work, but the one in the center below , thte text runs out of the div box.
derek

edbr
09-04-2008, 01:39 AM
code or crystal ball :)

silverglade
09-04-2008, 01:03 PM
here is the code to the page, the last div text runs out of the div box. its id is "bottom"

<!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>Untitled Document</title>
<style type="text/css">
<!--
.banner {
float: left;
height: auto;
width: 100px;
}
.top {
width: 50%;
}
#seconddiv {
float: left;
width: auto;
}
#sidepanel2 {
float: left;
width: auto;
}
#apDiv1 {
position:absolute;
left:53px;
top:12px;
width:625px;
height:75px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:33px;
top:97px;
width:90px;
height:440px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:170px;
top:114px;
width:432px;
height:404px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:630px;
top:99px;
width:87px;
height:440px;
z-index:4;
}
#rightside {
float: right;
width: auto;
background-color: #FFFFFF;
}
#leftside5 {
float: left;
width: auto;
}
#newleft6 {
float: left;
height: auto;
width: auto;
}
#newleft6 {
float: left;
height: auto;
width: auto;
background-color: #FFFFFF;
}
center {
float: none;
height: 130px;
width: 130px;
}
center1 {
height: auto;
width: auto;
}
#center6 {
height: auto;
width: auto;
}
#centernew {
height: 150px;
width: 300px;
float: none;
margin-right: auto;
margin-left: auto;
}
#bottom {
float: none;
height: auto;
width: 150px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
padding-right: 5px;
padding-left: 5px;
}
body {
background-color: #333333;
}
#apDiv5 {
position:absolute;
left:186px;
top:61px;
width:352px;
height:33px;
z-index:1;
float: none;
}
.style1 {color: #FF0000}
-->
</style>
</head>
<body>
<div class="style1" id="apDiv5">&nbsp;lind one&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; link 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; link 3</div>
<div id="seconddiv"><img src="banner.png" width="760" height="90" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="center"></div>
<div align="center"></div>
<p>&nbsp;</p>
<div id="rightside">
<p align="right">sdsfsadff<br />
sdfsdfsdfsffsds<br />
fsdfsdfsdfsdfsf<br />
fssdffsdfsdfsf<br />
fsdfsdfdfsfffsf<br />
fsdsdfsdfsffsdf</p>
<p align="right">aaaaaaaaaaaaa</p>
<p align="right">aaaaa</p>
<p align="right">sdfsfffsdfsdfdsfsfsfd</p>
<p align="right">sdfsdfsdfsfdfsfd</p>
</div>

<div id="newleft6">
<p>sdfsdfsdfsdfsdf</p>
<p>sdfsdfsddfdfdsdf</p>
<p>daaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>fsfdfsd</p>
<p>sdfsdfsdfsdddf</p>
<p>sdfsdfsdfsfddsfsfdsds</p>
<p>sdfsdfsfsfs</p>
<p>sfsdfsdfsddfsd </p>
</div>
<div align="center" id="centernew">
<p align="center"><img src="national_ex.gif" width="120" height="100" /></p>
</div>
<div id="leftside5"></div>
<div id="center6"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="bottom">
<p align="center">dfgdfgdgdfgdfgdgdf</p>
<p align="center">dfgdfgdgd sdffsfdsffsfdsffsffdfsssd</p>
<p align="center">sdfsdfsdfsfsfsfsdfvvvvvvs</p>
<p align="center">sfsfsfsdfsdfdsfdsfsfs</p>
<p align="center">sdfsdfsdfdsfdfdsfdsfs</p>
<p align="center">sdf </p>
<p align="center">sdfsdfsdfssdfs sdfsdfsfsff</p>
<p align="center">sdfsfsdfsdfss errerererreerere </p>
<p align="center">dfgdfgdfgdfgw</p>
</div>
</body>
</html>

silverglade
09-04-2008, 01:40 PM
here is the code without all those extra styles i forgot to delete.

the text in "left" div overflows outside thte box, i cant stop it.

<!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>Untitled Document</title>
<style type="text/css">
<!--
.banner {
float: left;
height: auto;
width: 100px;
}
#LEFT {
float: left;
height: 200px;
width: 80px;


}
-->
</style>
</head>
<body>
<div id="seconddiv"><img src="banner.png" width="760" height="90" /></div>
<div align="center"></div>
<div align="center"></div>
<div id="LEFT">
<p>ASDFASDF</p>
<p>ASDFAd</p>
<p>ASDFASDF</p>
<p>ASDFASDF</p>
<p>ADSFDFD</p>
</div>
</body>
</html>

silverglade
09-04-2008, 02:17 PM
also, when i make a right sidebar div box, when i try to type on the left side, the right sidebar div goes down.

grand poomba
11-20-2009, 09:29 AM
Did you ever get an answer to this problem? I am experiencing the exact same issue.

grand poomba
11-20-2009, 09:42 AM
Ok I answered my own question. If you are in a div area and you type jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

its not going to word wrap. Why? I don't know, but if your just typing along like normal then it will wrap just fine like it just did in this paragraph here.

Corrosive
11-20-2009, 12:16 PM
You can always use the CSS word-wrap: break-word; although I believe it is not supported by some older browsers.

domedia
11-20-2009, 03:10 PM
The solution is to use regular text while developing.
Adding 'jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj j' in the area you want text is never a good idea ;)
I either copy some random text or use Lorem Ipsum.