?
Solved

WORD WRAP IN HTML, using CSS

Posted on 2008-10-30
11
Medium Priority
?
1,246 Views
Last Modified: 2013-12-16
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
0
Comment
Question by:subhorachana
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 22842827
<div class="cntDiv">
    <div style="float:left;padding:4px"></div> Text will flow to the right and bottom of this div
</td>
0
 

Author Comment

by:subhorachana
ID: 22843221
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
 
LVL 30

Expert Comment

by:Steggs
ID: 22846536
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22846761
"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
 

Author Comment

by:subhorachana
ID: 22846955
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
 
LVL 30

Expert Comment

by:Steggs
ID: 22846981
.hide_elem {
display:none
}

add class="hide_elem"

0
 

Author Comment

by:subhorachana
ID: 22849656
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
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 22849840
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
 

Author Closing Comment

by:subhorachana
ID: 31511742
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
 

Author Comment

by:subhorachana
ID: 22851040
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
 
LVL 30

Expert Comment

by:Steggs
ID: 22852848
"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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question