Text Overflows Out of a DIV

This problem I'm having has me stumped. What is happening is I have [the makings of] a three column layout for a clan web portal and text in the left/right columns spills out of the side if the line is long enough. I can't figure out why it isn't wrapping inside the box.

The problem happens in Firefox 2, 3, IE 7, and Opera 9.27, so I know it isn't a simple browser quirk.

Here is a picture to help visualize.
http://i27.tinypic.com/169g5z4.png

HTML:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>Home - Constant Mayhem Society</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />

</head>

<body>

    <div id="container">

        <img id="header" src="../img/banner.jpg" alt="" />

        <div id="contentContainer">

            <div id="leftModules">

                <div class="module">

                    <div class="moduleTop"></div>

                    <div class="moduleMiddle">

                        <div class="moduleTopMiddle"></div>

                        <div class="moduleContent">

                            <p>

                                sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                            </p>

                        </div>

                    </div>

                    <div class="moduleBottom"></div>

                </div>

            </div>

            <div id="rightModules">

                <div class="module">

                    <div class="moduleTop"></div>

                    <div class="moduleMiddle">

                        <div class="moduleTopMiddle"></div>

                        <div class="moduleContent">

                            <p>

                                sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                                sdfsdfsdfsdfsdfsdf<br />

                            </p>

                        </div>

                    </div>

                    <div class="moduleBottom"></div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

CSS:

Expand|Select|Wrap|Line Numbers

 * {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}

body {background-image:url('../img/bg.gif'); background-color:#171717; background-repeat:repeat;}

p,ul,li,h1,h2,h3,h4{font-family: arial, "lucida console", sans-serif; color:#fff;}

#container {margin:10px auto 10px auto;width:805px; vertical-align:top;}

#contentContainer {display:block; width:805px;}

#leftModules{float:left; width:132px;}

#rightModules{float:right; width:132px;}

.module {background:#000;width:132px;}

.moduleTop {background-image:url('../img/mod_top.gif'); background-repeat:no-repeat; width:132px;height:10px;}

.moduleTopMiddle{position:absolute;top:0px;background:url('../img/mod_tmid.gif') no-repeat;height:90px; width:132px;}

.moduleMiddle{width:132px;position:relative;}

.moduleContent{background-image:url('../img/mod_mid.gif');display:block;background-repeat:repeat-y;width:132px;}

.module p,ul,li,h1,h2,h3,h4 {text-indent:5px;padding:5px 15px 5px 15px;font-size:12px;line-height:13px;}

.moduleBottom{background:url('../img/mod_bottom.gif') no-repeat; width:132px;height:24px;}

Apr 15 '08 #1

Subscribe Post Reply

3198

drhowarddrfine

7,435

Expert 4TB

Because there is no place to break the word. Put a space in there somewhere and you'll see the difference.

Apr 15 '08 #2

TyIzaeL

Hah! To think that I didn't realize that before!

Thank you, I would have spent way too much time trying the figure that out. Sometimes its best to have another perspective I suppose.

Thanks again.

Apr 15 '08 #3

by: Karthik | last post by:

Hi, I am writing this application that needs a lot of arithmetic calculations. I was wondering if C++ language specifies any way of detecting arithmetic overflows. Let us consider the following...

C / C++

Spill overflow text to another DIV

by: Andrew Poulos | last post by:

Say I have a text area. When the user clicks a button the entered text displays in a DIV. If there's too much text to fit in that DIV then the overflow text (the text that doesn't fit in the first...

Javascript

Question on Package Cache Overflows

by: datapro01 | last post by:

Running DB2 8.1.6A on AIX 5.1 We are experience package cache overflows. The high water mark for package cache is showing as 16,108,513 bytes, or approximately 3933 4K pages. The package...

DB2 Database

overflows : interpretation

by: hikums | last post by:

I have taken a table snapshot, and noticed two tables with high overflows. What should be done, if any. Table Schema = CASTING Table Name = ABC Table Type = User Data...

DB2 Database

text overflow in Label

by: MrNobody | last post by:

is there any way I can adjust the behavior of a Label when text overflows it's boundaries? I have a specific size Label which can show 2 lines of text, but on some occassions the text I insert...

C# / C Sharp

Overflows in tablesnapshot

by: db2udbgirl | last post by:

Table level snapshot showed me a entry as below Table Schema = CARD Table Name = DEALER Table Type = User Data Object Pages = 3480 Index Object Pages = 2622 Rows...

DB2 Database

Impact of Overflows and Page Reorgs

by: David Beardsley | last post by:

I'm working with several stored procedures processing a large volume of data. After monitoring their execution using Quest's Spotlight functionality I noticed a fair number of overflow accesses...

DB2 Database

Hash join overflows

by: Racerx | last post by:

Hi All, I use db2 v8.1 on AIX 5L Evrytikme I take a snapshot for one my databases I can see that there are Hash join overflows and small hash join overflows.. Jus need to know what shud i...

DB2 Database

Text overflows column 1 of a two column CSS layout

by: jimchapuk | last post by:

I created a two column CSS layout by floating the columns left and right respectively. When I put text into the first column (via HTML) it continues in a straight line through the second column...

HTML / CSS

What are stack or buffer overflows, how to test or fix them from occurring

by: krishna81m | last post by:

I know that in C++ if we create two char arrays char ch1; ch2; and then do strcpy(ch1,"Hello"); this is wrong and if ch1 and ch2 are allocated one by the other, the memory copies part of the array...

C / C++

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Text Overflows Out of a DIV

Similar topics