Solved

Wrap text around div

Posted on 2008-10-30
4
2,355 Views
Last Modified: 2011-10-19
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
0
Comment
Question by:subhorachana
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
LordOfPorts earned 500 total points
ID: 22844817
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
 

Author Closing Comment

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

Author Comment

by:subhorachana
ID: 22851096
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
 
LVL 19

Expert Comment

by:LordOfPorts
ID: 22852882
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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

786 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