problem with text/info going outside of defined areas, how do I fix this please

I have a site thats at
if you look in the bottom right conner it has the text of
"Watch major sporting events on our many tv sets and a 100 inch big screen!"
this is the area if too much text is typed in it makes the table go nuts(misaligned)
I also have this problem above with the events (but I would assume if the bottom right ones fixed i can copy the same logic to other places in the page.

please understand this too much text is due to an admin allowing for custom text to be placed in that area, I need to limit the text on this page, and can not limit it in the admin area.

how do I limit or stop problems on this page
thank you in advance for any help or code you may provide
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Where do they add this text?  Directly to the page or in another area?  Is the text applied using PHP?  Seemed to wrap fine when I added additional text manually to the generated page in that area.  Maybe you could provide example w/source code of the problem.
JohnnyAuthor Commented:
the admin is one I designed. using tinymce, a wyswg interface, and the sites live(at there site) and there typing into much text in that area and messing up the page.
login ee pw admin <<--- note this will be deleted when question is completed
thats an example of the interface, the page is the Home Page (Bottom Right Panel)

example just type in allot of info you'll see the problem
on this line

<div style="height:330;width:98%">
take out the height
<div style="width:98%">
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

JohnnyAuthor Commented:

is there a way to keep the look and if the text is too much it does nothing, basically lock the table sizes in place maybe?

so if text is to much it does not move the alignments?
JohnnyAuthor Commented:
i added an event, and the picture and the text is now way off the page...
how do i fix this?
try it with css. took a while to put together for you
might be easier if you got rid of the tables altogether
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Stingers 2 Sports Lounge - Urbana, Ohio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
    <link rel="shortcut icon" href="/favicon.ico">
<script type="text/javascript" language="javascript">
<!-- hide script from old browsers
//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";
//preload images:
if (browserVer == 1) {
a1 = new Image(107,36);
a1.src = "images/Home.gif";
a2 = new Image(107,36);
a2.src = "images/Home_Red.gif";
b1 = new Image(127,36);
b1.src = "images/Upcoming_Events.gif";
b2 = new Image(127,36);
b2.src = "images/Upcoming_Events_Red.gif";
c1 = new Image(137,36);
c1.src = "images/Drink_Specials.gif";
c2 = new Image(137,36);
c2.src = "images/Drink_Specials_Red.gif";
d1 = new Image(147,36);
d1.src = "images/Gallery.gif";
d2 = new Image(147,36);
d2.src = "images/Gallery_Red.gif";
e1 = new Image(157,36);
e1.src = "images/Map_Directions.gif";
e2 = new Image(157,36);
e2.src = "images/Map_Directions_Red.gif";
f1 = new Image(167,36);
f1.src = "images/Contact_Us.gif";
f2 = new Image(167,36);
f2.src = "images/Contact_Us_Red.gif";
//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
//end hiding -->
 <script type="text/javascript" src="dropinslideshow.js">
 * Drop-in Slideshow Script- © Dynamic Drive (
 * This notice must stay intact for legal use.
 * Visit for full source code
<div style="clear:both; width:800px; margin-left:1px; margin-top:5px; margin-right:1px; height:66px;"><img src="images/Top_Header.gif" width="800" height="66" alt=""></div>
<div id="contentcontainer" style="background-repeat:repeat-x; background-position:top;  background-image:url(images/Main_body.gif); width:800px;">
<div style="clear:both; width:224px; float:left;">
<img src="images/Bottom_Bee.gif" width="224" height="177" alt="">
            <div STYLE="margin-left:20px; margin-top:5px; margin-right:10px">
	<!-- left side panel -->
		<p>Hours: M-Sat 1 p.m. to 2:30 a.m.<br /> Closed Sunday <br /> Happy Hour: M-F 6-9<br /> <br /> <strong> Stingers 2 Sports Lounge</strong><br /> 244 		Patrick Ave.<br /> Urbana, OH 43078 <br /> (937) 653-8448<br /> <br /> 21+ Establishment</p>
		<p>&nbsp;</p>         <!-- left side panel -->
		<!--  right panel starts here -->
<div style="width:576px; float:right;">
<div><strong><big>Next Events at Stingers 2 Sports Lounge</big></strong> &nbsp;&nbsp;<small><a href="events.php">Click here for more events</a></small>
<br />
			<hr align="center" width="576px">
			<!-- upper middle panel -->
                     <p><span style="font-family: Arial,Helvetica,sans-serif; color: black;">We are honored that you are visiting our web site.
   We are always striving to find new
   ways to get our message out to current and prospective patrons.
   This web site allows us to reach people we may never have been
   able to reach before. </span></p>
<div style="text-align:center; margin-left:auto; margin-right:auto; font-family: Times New Roman,Times,serif; font-size: x-large;"><em>Thank you</em> <br /> <span style="font-family: Times New Roman,Times,serif; font-size: xx-small;"> The Stingers 2 Sports Lounge Staff</span></div>                  
   <!-- upper middle panel end-->
		<div STYLE="width:300px; margin-left:2px; margin-top:5px; float:left;">
		    <script type="text/javascript">
		    var myimages=new Array()
		       myimages[0]=["pictures/bartenders.png", "", ""]
myimages[1]=["pictures/dancefloor.png", "", ""]
myimages[2]=["pictures/entrancestaff.png", "", ""]
myimages[3]=["pictures/pooltable.png", "", ""]
myimages[4]=["pictures/theband.png", "", ""]
		    //Create new drop-in slideshow
		    //Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
		    new dropinslideshow(myimages,280,170,3000,true)
		<div style="width;276px; float:left;margin-left:1px; margin-top:5px">
		    <font color="black" face="Arial,Helvetica,sans-serif" size="2">
			<!-- bottom right panel -->
			<p style="margin-top:0px; margin-left:2px;"><span style="font-size: xx-small;"><strong>Watch major sporting events on our many tv sets and a 100 inch big screen!</strong></span><br /><br /> <span style="font-size: xx-small;"> Corn-hole tournaments.<br /></span><span style="font-size: xx-small;">Weekly contests.</span><br /><span style="font-size: xx-small;">Smokers welcome. on our </span><span style="font-size: xx-small;">outisde patio with heated canopy.</span></p>
<p><span style="font-size: xx-small;">Every Wednesday night is guitar hero night!</span></p>
			<!-- upper left panel -->
	<br clear="all">
	<div style="clear:both;">
			<!-- <img src="images/Main_Under_Bee.gif" width="224" height="257" alt=""> -->
<div style="float:left;"><img name="a" src="images/Home_Red.gif" alt="" width="75" height="38" border="0"></div>
<div style="float:left;"><a href="events.php" onMouseOver="hiLite('b','b2','Current Events')" onMouseOut="hiLite('b','b1','')"><img name="b" src="images/Upcoming_Events.gif" alt="" width="175" height="38" border="0"></a></div>
<div style="float:left;"><a href="drinks.php" onMouseOver="hiLite('c','c2','Drink Specials')" onMouseOut="hiLite('c','c1','')"><img name="c" src="images/Drink_Specials.gif" alt="" width="154" height="38" border="0"></a></div>
<div style="float:left;"><a href="gallery.php" onMouseOver="hiLite('d','d2','Gallery')" onMouseOut="hiLite('d','d1','')"><img name="d" src="images/Gallery.gif" alt="" width="90" height="38" border="0"></a></div>
<div style="float:left;"><a href="map.php" onMouseOver="hiLite('e','e2','Map Directions')" onMouseOut="hiLite('e','e1','')"><img name="e" src="images/Map_Directions.gif" alt="" width="181" height="38" border="0"></a></div>
<div style="float:left;"><a href="contact.php" onMouseOver="hiLite('f','f2','Contact US')" onMouseOut="hiLite('f','f1','')"><img name="f" src="images/Contact_Us.gif" alt="" width="125" height="38" border="0"></a></div>
			<img src="images/Black_Line.gif" width="800" height="18" alt="">
		<div style="background-repeat:repeat-x; background-position:top; background-image:url(images/Bottom_Banner.gif); height:50px; tex-align:center; width:800px;">
		  Copyright &copy; 2007, Stingers 2 Sports Lounge,  All rights reserved
		<small>Design by <a class="siteinfo" href="">Springfield Connect</a></small>
<!-- End ImageReady Slices -->

Open in new window

JohnnyAuthor Commented:
my page has ALLOT of php code to make the page.

what did you do to the page?
as ill have to cut and paste the code to fit my php coded page.
JohnnyAuthor Commented:

the separation lines are gone and the pictures are not on the left and text not on the right

so what ever you did did not fix my page its reformatted not the way it was.

and as i said i have allot of php code building that page, so i will  have to know what your doing to change the page
JohnnyAuthor Commented:
sorry gave local link not web link
for the seperation lines, just add border styles to it.
JohnnyAuthor Commented:
I wanted the layout to stay the same, with your proposed solution paulp75, the layout was taken away with the bottom T section as well as the border lines i had, mainly the section at the bottom where the picture was on the left and the text on the right.

I'm sorry but I've been trying for a full 6 hours now and I cant for the life of me get my layout back..the solution you have provided is basically worthless to me to even test it..

I DID NOT want a layout change i wanted the text on the bottom right to NOT move the rest of the page, if a amount that would push the table borders was achived.

basically I'm back to square one now.

I need the text to stay in place (with my layout intact) the text when too much is place in that area pushes the pictures down as well as runs off the background, I want it to just fit(the area stays locked, and more text then can fit in that area does NOT display, or something along that idea) The problem is when too much text is typed in the admin section that allow for changing that area the rest of the page is messed up, when too much text is placed there, I need to limit or not display the text somehow.

Thank for any farther help you may provide
(maybe i was not clear on what i needed)
to get the borders back, just use inline borders etc.
left hand side div
<div STYLE="width:300px; margin-left:2px; margin-top:5px; float:left; border-top: thin solid #666666;">

fight hand side div
<div style="width;276px; float:left;margin-left:1px; margin-top:5px; border-left: thin solid #666666; border-top: thin solid #666666;">

if you want to limit the text, do something like this. the following example limits it to 500 characters, just change that value.

<? echo substr($row['news'],0,500); 

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.