• 0

[CSS] Text Overflows from DIV

Asked by chuayw2000,

 Share

Question

Community Regular

chuayw2000

Posted
Posted

Here's my problem: I am trying to get text to fit into a fixed width DIV without overflowing from its container. IE displays this correctly

ie1.th.jpg

But not firefox.

firefox.th.jpg

<table> doesnt do anything. Below is the HTML

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Warnborough Educational Centre - Home&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;link href="css.css" type="text/css" rel="stylesheet" /&gt;

&lt;/head&gt;
&lt;body bgcolor="#FFFFFF"&gt;
&lt;center&gt;
&lt;!-- ImageReady Slices (template4.psd) --&gt;
&lt;table id="Table_01" width="744" border="0" cellpadding="0" cellspacing="0" style="text-align: left;"&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;

            &lt;img id="header" src="images/header.png" width="744" height="10" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="2"&gt;
            &lt;img id="template4_02" src="images/template4_02.png" width="38" height="2" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img id="empty_left" src="images/empty_left.png" width="3" height="2" alt="" /&gt;&lt;/td&gt;
        &lt;td colspan="7"&gt;
            &lt;img id="template4_04" src="images/template4_04.png" width="703" height="2" alt="" /&gt;&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="banner" src="images/banner.png" width="744" height="84" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="5"&gt;
            &lt;a href="index.php"&gt;

                &lt;img id="banner007" src="images/banner-07.png" width="126" height="1" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="3"&gt;
            &lt;a href="about.php"&gt;
                &lt;img id="about" src="images/about.png" width="126" height="40" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td colspan="3"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="banner009" src="images/banner-09.png" width="378" height="1" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="3"&gt;
            &lt;a href="course.php"&gt;

                &lt;img id="courses" src="images/courses.png" width="114" height="40" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="4"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="home" src="images/home.png" width="125" height="35" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;img id="template4_11" src="images/template4_11.png" width="1" height="39" alt="" /&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;

            &lt;a href="contact.php"&gt;
                &lt;img id="contact" src="images/contact.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;a href="teacher.php"&gt;
                &lt;img id="yeacher" src="images/yeacher.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;a href="course.php"&gt;
                &lt;img id="courses015" src="images/courses-15.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
        &lt;td&gt;
            &lt;img id="template4_15" src="images/template4_15.png" width="4" height="4" alt="" /&gt;&lt;/td&gt;
        &lt;td colspan="3"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="home017" src="images/home-17.png" width="121" height="4" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10" style="white-space:nowrap;width:744px;background-image:url('images/content.png');background-repeat:repeat-y;"&gt;&lt;div style="position: relative; left:10px;width:728px;"&gt;

                &lt;!-- Content --&gt;
                &lt;table style="width:100%; height:20px;"&gt;&lt;tr&gt;&lt;td style="vertical-align:center;"&gt;
                &lt;!-- Tree --&gt;
                 &lt;a href="index.php"&gt;Home&lt;/a&gt; &gt;&gt; News&lt;/td&gt;
                &lt;td style="text-align:right; vertical-align:center;"&gt;&lt;!-- Sitemap--&gt;
                &lt;a href="sitemap.php" style="font-weight:bold;"&gt;Sitemap&lt;/a&gt;

                &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                &lt;hr&gt;&lt;div class="content_box"&gt;
&lt;span class="title"&gt;Welcome to Warnborough Educational Centre&lt;/span&gt;&lt;br&gt;
Committed to excellence in education, Warnborough Educational Centre makes a vital contribution to providing high quality and cost-effective enrichment education courses in the English language
&lt;br&gt;&lt;br&gt;
Warnborough Educational Centre was established on 25&lt;sup&gt;th&lt;/sup&gt; February 2002. The centre has been involved in offering enrichment courses to the public for two years. Courses have also been designed and taught to teachers of phonetics.

&lt;/div&gt;&lt;/div&gt;
&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;

        &lt;td colspan="10"&gt;
            &lt;img id="bott" src="images/bott.png" width="744" height="20" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;
            &lt;img id="content020" src="images/content-20.png" width="744" height="1" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;

            &lt;img src="images/spacer.gif" width="4" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="34" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="3" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="84" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="1" height="1" alt="" /&gt;&lt;/td&gt;

        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;

            &lt;img src="images/spacer.gif" width="114" height="1" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;


© 2004 
Warnborough Educational Centre &lt;br&gt;10 Anson Road #30-07 International Plaza Singapore 079933
&lt;br&gt;Tel: 6559 9129
Fax: 6477 9922
&lt;/center&gt;
&lt;!-- End ImageReady Slices --&gt;
&lt;/body&gt;
&lt;/html&gt;

And CSS

/* Basic Elements */
body, html {
	background-color: #ffffff;
	font-family:arial;
	font-size:12px;
	color:#000000;
	margin: 0 auto;
}
td,div,span,p{
	font-family:arial;
	font-size:12px;
	color:#000000;
}
img{
	border: none;
}
hr{
	border: #aaaaaa 1px solid;
	background-color: #aaaaaa;
}
ul,ol{
    list-style-image: url(images/bullet.gif);
	list-style-position: outside;
	margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-left: 9px;
    padding-left: 9px;

}
/** Link **/
a:link{
	color: #999999;
	text-decoration: none;
}
a:visited{
	color: #999999;
	text-decoration: none;
}
a:hover{
	color: #ff0000;
}

/** Input **/
input{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
input:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

input:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

input:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
select{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
select:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

select:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

select:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
textarea:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}



/* Text Classes */
.title{
    font-size: 15px;
	color: #000000;
	font-family: arial;
	text-decoration: underline;
	font-weight: bold;
}
/** Table Classes **/
.menutable{
	border: #444444 thin dotted;
}
.maintable{
	border: #444444 thin dotted;
}
.newstable{
	background-color: #CED0D2;
	border: #cccccc thin solid;
}
/* Misc. Classes */
.borderless{
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	border: 0px;
}
.content_box{ 
    width: 700px;
    border-style:solid; 
    border-width: 1px; 
    border-color:#999999; 
    background-color:#FFFFFF
    overflow:scroll;
    position:relative;
    left:2%;
    
}

Any help is appreciated :D

Link to comment
https://www.neowin.net/forum/topic/242048-css-text-overflows-from-div/
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Veteran

metal_dragen Veteran

Posted
  • Veteran
Posted

You're missing a semicolon (;) after the background-color in your .content_box class. You also have a closing div (</div>) twice after your content, even though you only have one open. Make sure you validate that page. I guarantee you'll have a lot to clean up.

Also, learn how to use the short syntax of CSS properties - it'll clean up and compact your code a lot more.

For example:

This:

border-style:solid;
border-width: 1px;
border-color:#999999;

would become this:

border: 1px solid #999;

  • 0
Community Regular

chuayw2000

Posted
  • Author
Posted

Oh, I fixed the CSS problem and now it gives me a horizontal scrollbar instead.

What I want to achieve is what IE is displaying. Is there anyway to wrap the text before thet get out of the box?

And the two </div> is correct, according to W3C Validation. (The rest of the validation errors were my fault: I forgot to change <br> to <br /> and <hr> to <hr />)

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Microsoft about to radically change how often your Edge browser updates

      By Legend20 · Posted

      You are clueless. The updates are done in the background so the next time you open Edge the updates are applied automatically. There is no need to close all your tabs. Just keep browsing like you normally do. Clearly you don't use Edge and are just one of those haters that complain for the sake of complaining.
    • The official Funny Pictures thread

      By +Edouard · Posted

      I don't get this David. Can you explain it please.  
    • Windows Server gets DNS over HTTPS (DoH) support

      By Legend20 · Posted

      Microsoft is busy. Lots of changes to be released imminently for Windows server or soon. Also, lots happening for next version as well. Third party virus scanning software is being moved out of Kernel mode to avoid repeat of Crowdstrike incident. Windows Protected Mode and Windows Ready Print no longer require third party print drivers to be installed. New storage stack being developed. New NVME drivers now available for Windows Server 2025 to improve local NVME drive performance by 60+ percent. NVME-Of of fabric being worked on for next release to improve network access to NVME drives. ReFs (next file system) now has ability to boot and will become default file system in next release of Windows Server. ReFs improves on NTFS in several areas including resiliency and reliability and scalability. New update stack is being worked on to unify Windows updates, and updates for drivers and first party/3rd party application software. A stricter and more robust third-party driver certification program (ODI) is being worked on to improve performance, thermals, battery life, and reliability on modern Windows hardware by tightening how OEMs and IHVs (Intel, AMD, Qualcomm, NVIDIA, etc.) build and ship drivers. There is a tone more but too numerous to mention.
    • Windows 11 gets better widgets, new Screen Tint feature, and more in the latest build

      By ZipZapRap · Posted

      Now disable that stupid OneDrive backup request when Windows starts please. So unbelievably frustrating to only have “remind me later” instead of “no and never ask me again”
    • Microsoft releases new Windows 11 Media Creation Tool with the latest updates

      By goretsky · Posted

      Hello, The Media Creation Tool is still at v10.0.26100.7019 from October 2025. Just looks like the backend has been updated. Regards, Aryeh Goretsky

  • Recent Achievements

    • One Month Later
      Markus94287 earned a badge
      One Month Later
    • Week One Done
      Markus94287 earned a badge
      Week One Done
    • One Year In
      Markus94287 earned a badge
      One Year In
    • Dedicated
      truespursfan earned a badge
      Dedicated
    • Rookie
      restore went up a rank
      Rookie

  • Popular Contributors

    1. 1
      +primortal
      506
    2. 2
      +Edouard
      168
    3. 3
      PsYcHoKiLLa
      154
    4. 4
      ATLien_0
      90
    5. 5
      Steven P.
      79
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!