Solved

Wrap text around div

Posted on 2008-10-30
4
2,343 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
C3-->D3 Line Chart 4 18
can't display bootstrap glyphs in select menu 4 16
Wordpress CSS Link Issue 2 17
Change month dropdown 5 15
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

21 Experts available now in Live!

Get 1:1 Help Now