Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    wrapping text around a div

    Hello

    I am trying to wrap text around a div the top of a div



    **I can easily get the text to wrap around the bottom of a div like:
    http://www.bigbaer.com/css_tutorials...l.tutorial.htm

    something like below where the image would be a div container
    http://earth4win.magma.ca/ryanw/2222/wrap.cfm


    In the example above the text is hard coded but the text I am using is dynamic and I do not want to be forced to do a character count and break up my text into segments


    Any help on this would be appreciated

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Im assuming this is in a blog. can you not just write the image tag in the post as you write it?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is not for a blog and this is not for a image

    basically I just want text to wrap around the top of another div. Inside the other div there will be text

    Here is a illustration of what I am trying to achieve

    http://earth4win.magma.ca/test.bmp

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #test {
    width:400px;
    margin:auto;
    }
    #box {
    border:5px solid #F00;
    padding:5px;
    width:200px;
    float:right;
    }
    </style>
    </head>
    <body>
    <div id="test">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempus. Maecenas faucibus. Cras fermentum pede quis eros. Phasellus posuere lectus et nulla. Sed ultricies nunc quis justo. Duis lacus justo, lacinia non, aliquet sit amet, viverra vel, leo. Phasellus neque massa, consectetuer at, rutrum in, mattis vitae, enim. Phasellus in ligula sit amet nisl tincidunt hendrerit. Nullam tincidunt tellus eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed luctus ultricies ligula. Praesent et erat. Sed elit turpis, venenatis non, dignissim ac, gravida non, ligula. </p>
    <p> Ut at purus a lorem fringilla sodales. Proin rutrum tincidunt elit. Proin purus. Fusce turpis. In ac felis ac odio mattis laoreet. Aliquam quam nisi, interdum a, dictum eu, vehicula eget, tortor. Nunc quis diam. Phasellus sed nisl. Pellentesque mollis. Fusce hendrerit, massa nec mattis rutrum, massa augue congue sem, quis luctus eros purus sit amet ligula. Aliquam in neque cursus elit scelerisque rutrum. Morbi nonummy molestie mi. Praesent vulputate. Mauris sed ipsum at arcu bibendum porttitor. Suspendisse lorem turpis, rutrum eu, volutpat accumsan, lobortis at, lectus. </p>
    <div id="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mauris. Morbi pretium tortor at neque. Praesent tempor nulla in nisl. Nulla quis augue.Nam aliquet urna ut nisi. Cras nibh lectus, volutpat ut, consectetuer ut, imperdiet non, nulla. Nulla dolor. Pellentesque mi. Nulla et dui. Maecenas placerat pede. Maecenas mauris diam, gravida sit amet, congue quis, dapibus tristique, nibh.</div>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempus. Maecenas faucibus. Cras fermentum pede quis eros. Phasellus posuere lectus et nulla. Sed ultricies nunc quis justo. Duis lacus justo, lacinia non, aliquet sit amet, viverra vel, leo. Phasellus neque massa, consectetuer at, rutrum in, mattis vitae, enim. Phasellus in ligula sit amet nisl tincidunt hendrerit. Nullam tincidunt tellus eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed luctus ultricies ligula. Praesent et erat. Sed elit turpis, venenatis non, dignissim ac, gravida non, ligula. </p>
    <p> Ut at purus a lorem fringilla sodales. Proin rutrum tincidunt elit. Proin purus. Fusce turpis. In ac felis ac odio mattis laoreet. Aliquam quam nisi, interdum a, dictum eu, vehicula eget, tortor. Nunc quis diam. Phasellus sed nisl. Pellentesque mollis. Fusce hendrerit, massa nec mattis rutrum, massa augue congue sem, quis luctus eros purus sit amet ligula. Aliquam in neque cursus elit scelerisque rutrum. Morbi nonummy molestie mi. Praesent vulputate. Mauris sed ipsum at arcu bibendum porttitor. Suspendisse lorem turpis, rutrum eu, volutpat accumsan, lobortis at, lectus. </p>
    </div>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 12-07-2006 at 05:11 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your reply

    from my first post I already know how to do this ie:
    http://www.bigbaer.com/css_tutorials...l.tutorial.htm


    I am wanting the text to wrap above the div and not below the div
    ie: the picture below
    http://earth4win.magma.ca/test.bmp


    Additionally the text is dynamic and cannot be pre-fixed

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I'm not sure what to tell you then. CSS can only style html. It can't tell it where to wrap and what not. As long as the box is floated text will wrap around it. I gave you an example of what it looks like. Up to you to figure out to get it that way.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for trying to help, but again I already know how to do what you have shown me as I have coded this many times before. My question is to try and find a way to "WRAP TEXT AROUND THE TOP OF A DIV".

    http://earth4win.magma.ca/test.bmp

    The reason I mentioned it was dynmaic text is because if it was static text I could simply hard code the text and then break my text when I wanted to and then insert the div. Like here for instance <div style="float:right:></div>
    then continue with my sentence.

    Being that my text is dynamic the only way I know to wrap text around the top of the div would be to cut off my string variable at some predermined white space gap.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •