Wrap text around div

Hello,
I am looking for a solution to a Word wrap in HTML problem. I want to Word wrapp of the text in a Div around another div.
I am referring the code in link which is mentioned on the URL http://www.rayswoodworks.com/test_files/One-Column/1-col-demo.html .I want the same results.The smaller 'div' should be to the right and the words should be wrapped around it.
Attached is my HTML code snippet, CSS Snippet,and the screenshot of how my page is looking currently.
Please suggest how to get the word wrap around the first div and mak it appear like the link in the attachment.

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.

LordOfPortsCommented:
It looks like your code works except change .left to #left because you are using id="left" and not class="left" i.e.:

.left <- style for elements with class="left"

#left <- style for element with id="left"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    
    .cntDivcontent
    {
	    line-height: 14pt;
	    padding: 0px 10px 10px 15px;
	    overflow:hidden;
        background:#CFD4E6; 
        text-align:justify;
        height:1%; /*haslayout for ie6 */
    }
    
    #left 
    {
        background: #888FFF;
        min-height:250px;
        width: 200px;
        float: right;
        margin:10px 10px 0 10px;
        border:1px solid blue;
        text-align:left;
        display:inline; /*for ie6 */
    }
 
    
    </style>
</head>
<body>
<div class="cntDivcontent">
 <div id="left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna.</p></div> <!-- end left -->
 
<br />This is how I want my site to look. http://www.rayswoodworks.com/test_files/One-Column/1-col-demo.html.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. 
Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non 
faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent 
varius.</div>
 
</body>
</html>

Open in new window

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 .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,
I was able to wrap the text around the DIV and use the 'display:none'  property to show/hide the DIV using a flip of CSS.
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 tell 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.
CUrrently the Yellow table appears on the page, but due to a change we want to remove the yellow table shown in the screenshot from the HTML page.
The main challenge is that I do not want to do any change to the HTML page when the change gets confirmed.I want the code on the HTML page to be as it is and just by a flip of the CSS we want the Yellow Table to appear or not appear.
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
LordOfPortsCommented:
It would be the same for a TABLE element as for a DIV, you just need to add the id and/or class attribute to the table, e.g. in the sample below the table has class="TableClass" and id="TableID" so that now in you CSS you can apply styles to it:

#TableID
{
    /* Add CSS for table with the ID "TableID" */
}

.TableClass
{
   /* Add CSS for elements with Class "TableClass" */
}

You can use both ID and CLASS or just one or the other; either way it will be same as for a DIV.
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="TableClass" id="TableID">

Open in new window

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
HTML

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.