Solved

WORD WRAP IN HTML, using CSS

Posted on 2008-10-30
11
1,232 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
  • 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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 500 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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now