<pre> and <div> tag conflict....

Some content from a txt file is put in <pre></pre> tags in a html file. This works well. It maintains break lines and spacing.

Because some of the lines from the text file are very long. In order to force them wrap, I added a div tag with width: 75%; but it works only when I remove <pre> tags.

I need the functionality from both <pre> and <div> tags.

Question: How can I make this work?

Thank you.

<pre>
<div id="tableSchema">

There are seven tables to handle this application. The table structure here is fairly normalized and accomplishes the following tasks:
•	Makes data digestible (atomic - broken down to its simplest form) for accurate and powerful reporting operations.
•	Cuts down the number of tables to 1/3 by combining some 20 tables into two tables (tDefinition and tResponseSpecific).
•	Facilitates development of robust and user-friendly interfaces resulting in continuous savings for the life of the application.
•	Is ready to handshake with any additional tables required to perform some functionalities in the future.
Table Descriptions:
CDS-specific data is stored in four tables, tRequest (4),  tPositionRequest (5), tResponse (6) , and tResponseSpecific (7). The remaining five tables handle the generic data that is already in use by the other Oracle based applications. For performance purpose, because this application uses less than 0.5% of the data in the existing Oracle tables, the following redundant tables are included with this application:

Generic (utility) tables:
1.	tPeople:
This table keeps personal data such as name, address, phone, etc. regardless of what work they perform.  Only first name, MI, and last name are entered to this table. The rest of the fields in this table are uploaded frequently based on some other well maintained tables. 

2.	tPosition:
This table matches people’s function(s) throughout the system allowing a professional to be assume different hats at different groups. in one or more facilities. Allowing, for example, a doctor function at different capacities in different groups in one or more facilities.  
</div>
</pre>

Open in new window



I have tried the following also but it hasn't worked:

<div id="tableSchema">
<pre>
.
.
</pre>
</div>
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
I found this helps

.wrapper{width:300px;}
pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

Open in new window


Where you have
<div class="wrapper">
    <pre>
             some
                        pre
                                    stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
    </pre>
</div>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The reason is inside of the pre tag is taken as your code.  You should be able to use your css on your pre tag.

pre {width:400px;}
0
 
Dave BaldwinFixer of ProblemsCommented:
<pre> means pre-formatted.  You can't pre-format with <pre> and re-format with <div> at the same time.  You can set the width in characters but not all browsers support that.

I tried to 'style' your <pre> text in Firefox, IE, and Chrome.  They all ignored any styling inside the <pre> tags and the text ran right off the page.  Time for another plan.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
COBOLdinosaurConnect With a Mentor Commented:
pre  {width:600px;overflow-x:scroll;}

Cd&
0
 
Ray PaseurCommented:
Please explain what functionality of the <pre> tag you're relying on, thanks.
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Ray,

There is a txt file containing some code. It includes some line-breaks and tabs to space out the content.
-- PL/SQL, CDS Project, 2012
-- See additional notes at the end.

-- create tPeople.
-- users are expeced to enter only tPeople.nuid, the rest of the information will be refreshed 
-- nightly or on demand using the existing tables in the Oracle database.  
CREATE TABLE tPeople (
	peopleID		number(6)		not null,
	admin			char(1)			not null default 'N', 
	submitter		char(1)			not null default 'N', 
	operator		char(1)			not null default 'N', 
	builder			char(1)			not null default 'N',

Open in new window



To format it in a html file, I use <pre>

Also see:  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28139845.html

----------
COBOLdinosaurPosted,

pre  {width:600px;overflow:scroll;}

works okay. Please note that I had to remove -x (ASP 4.0)
0
 
Dave BaldwinFixer of ProblemsCommented:
Both @padas's and Cd&'s methods both work to limit the space occupied by the text in the <pre> tag in IE, Firefox, and Chrome.
0
 
COBOLdinosaurCommented:
Yeah overflow should work the same way as overflow-x as long as you don't use a fixed height.

Cd&
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
padas,

My apology for not trying your solution properly.  It works very well and I will put a request to reopen and regrade the solutions mostly because your solution was posted first (as EE car race flag implies, first correct answer gets the points).

Regards,

Mike
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.