WORD WRAP IN HTML, using CSS

Please find attached the issue with some snapshots.I am not able to procced .Please give some suggestions.
I have a current page that has text running from one end to another and Below is a snnipet of my current page code.
As per a change in requirement, I want to insert a box <space> containing some other text in this page. The requirement is such that the blank area for the box to appear will always be present in the code of the page. When the box has text in it, the existing text should wrap around the box. If the box does not have any text then the existing text should be as it is running from end to end on the page.
The appearance of the page currently and how it should look like is attached in the file Issue-WordWrapHTML.doc .Please give some suggestion on how to proceed.

Code : <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td><img src="images/sp.gif"  height="1"  width="1"/></td>
	<td valign="top">
	</td>
</tr>
<tr>
	<td><img src="images/sp.gif"  height="350"  width="1"/></td>
	<td valign="top" class=""><!--DN_CONTENT_ID:index|MainContent1|srsp--><div class="cntDiv"><br />This is where the current text appears.I want to insert a box or div with additional text so that the current text will wrap around it .AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
    </td>
</tr>
</table>

Open in new window

Issue-WordWrapHTML.doc
subhorachanaAsked:
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.

Mark StegglesWeb DeveloperCommented:
<div class="cntDiv">
    <div style="float:left;padding:4px"></div> Text will flow to the right and bottom of this div
</td>
0
subhorachanaAuthor Commented:
Thanks a lot STeggs for your response.
But what I want is
1: How to Create a div or table with text , such that when there is no text  in the new Div, then the existing text on the page flows over it, and when the div has some content , then the existing text on the page wraps around the Div or table.

For additional reference please take a look at the attached document.
0
Mark StegglesWeb DeveloperCommented:
Hmmm, Thats not possible with css alone.

Where is the text coming from? Can you wrap it in a html tag before its put into the page?

You could probably do it with javascript... IF there is text inside the box then display:block IF NOT then display:none

Hope this helps

0
Ultimate Tool Kit for Technology Solution Provider

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 now.

scrathcyboyCommented:
"then the existing text on the page flows over it,"

The coding to accomplish this is TOTALLY different for a table than it is for a DIV.  What one do you want?
0
subhorachanaAuthor Commented:
Thanks for the response.I was able to word wrap the text around a Div.
Now I am stuck to find a way by which I can just make a small flip somewhere, either in code or in CSS and make the small div visible or not.
I need a way to do this by creating 2 CSS and with just a flip of the CSS , this div will appear or disappear. I can manually copy the CSS when I want to do the change of the small Div to appear or not.
Such that when there is no text  in the new Div, then the existing text on the page flows over it, and when the div has some content , then the existing text on the page wraps around the Div or table.
Attached is my code snippet for the HTML page and the CSS and also the screenshot of how my current page looks.
I can either use Div or table , whichever way I can get it to work.
Please suggest a solution.
Issue-WordWrapHTML.doc
0
Mark StegglesWeb DeveloperCommented:
.hide_elem {
display:none
}

add class="hide_elem"

0
subhorachanaAuthor Commented:
Steggs.Please explain what the above will do.
I will explain my requirement again for clarification.
1: I already have an existing page with text running from end to end as a normal HTML page.
2: As per a change there might be a need for a DIV at the right hand side of the page to place additional text. if the change is confirmed then the DIV will appear on the page and the text should wrap around it.
3: The main challenge is that we do not want to do any change to the HTML page when the change gets confirmed.We want the code on the HTML page to be as it is and just by a flip of the CSS we want the DIV to appear or not appear.
SO I guess what needs to be done is the DIv will always be present, but somehow should be hidden , so that the text runs normally.
But with a flip of CSS, the div should appear,with text wrapped.

Please suggest some solution.This is very very important for me.
Thanks in advance.
0
Mark StegglesWeb DeveloperCommented:
Hello,

This is very easy to do in css. The css property that you need to use is display:none... all you will have to do is this in your stylesheet:

your current code:

#left {
    background: #888FFF;
    min-height:50px;
   float: right;
    width: 200px;
    margin:10px 10px 0 10px;
    border:1px solid blue;
    text-align:left;
    display:inline; /*for ie6 */
}

to hide the div you will change the display to display:none by uncommenting the display:none


#left {
    background: #888FFF;
    min-height:50px;
   float: right;
    width: 200px;
    margin:10px 10px 0 10px;
    border:1px solid blue;
    text-align:left;
    display:inline; /*for ie6 */
 /*   display:none    uncomment this to hide the div    */
}


Hope this helps

0

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
subhorachanaAuthor Commented:
Thanks a lot Steggs. You really are a genius. I will get back with additional queries.But thanks so much for such a quick and easy response this time.
0
subhorachanaAuthor Commented:
Hello,
There is another box I want to show/hide based on the cSS. but this time it is a table.It has been made as a table for the look and feel of the page, because I guess the same thing cannot be achieved by a DIV.
I guess the 'display:none' property is not working on a table.Please either teall me a way to change this box to a DIV without changing the look and feel of the page, or Please tell me the change in the CSS so that I can show or hide a table with a flip of the CSS.
Please find attached the Code and the screenshot of the page with the yellow box, that i want to show/hide.
Thanks in advance for the help.
Issue-WordWrapHTML.doc
0
Mark StegglesWeb DeveloperCommented:
"I guess the 'display:none' property is not working on a table"

Yes it will work on the table... display:none will work on any html element


---

I looked at your document and couldnt see class="cntDivAlert" anywhere in the html.

Also, why are you using tables to layout text? Tables should be used for tabular data only

Thanks
Steggs
0
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
Web Development Software

From novice to tech pro — start learning today.

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.