?
Solved

Wrap text around div

Posted on 2008-10-30
4
Medium Priority
?
2,368 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
[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
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
LordOfPorts earned 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

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