Wrap text around div

Discussion in 'CSS' started by radiofanatic, Mar 25, 2009.

  1. #1
    Hi,

    I need to wrap text around a div like in the atached image (at top, right and bottom). The code is something like this:
    <div class="container">
    <div class="DIV">
    DIV DIV
    </div>
    TEXT TEXT TEXT
    </div>

    Like this - http://vreaudetoate.ro/wrap.jpg
     

    Attached Files:

    • wrap.jpg
      wrap.jpg
      File size:
      12.1 KB
      Views:
      5,933
    radiofanatic, Mar 25, 2009 IP
  2. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #2
    Hi radiofanatic,
    what you need is the float property. Try this example below:
    .div {
    float: left;
    }

    Look at this - its straightforward once you read it twice: http://www.tizag.com/cssT/float.php

    Le007
     
    le007, Mar 25, 2009 IP
  3. radiofanatic

    radiofanatic Peon

    Messages:
    51
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    No, thats not what I need. Look better at the picture, the div inside the content is surrounded by text, at the top, right and bottom. Also the DIV code is first, then is TEXT in the html code.
     
    radiofanatic, Mar 25, 2009 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    like le007 said, you'd have to use the float property. to get the text to go above the div, you have to move the div inside the text in the HTML, the div can't go first. i've tried looking for cleaner ways of doing this, but i couldn't find any.
     
    rikun, Mar 26, 2009 IP
  5. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    as soon as i posted my previous message, i thought of another way. it's kinda cheap but it works and only if your DIV stays put. put another div, let's give it the class name "topWrapSpacer" (i suck at naming my divs), above DIV.

    so your html should be like this now:

    
    <div class="container">
        <div class="topWrapSpacer"></div>
        <div class="DIV">
            DIV DIV
        </div>
        TEXT TEXT TEXT
    </div>
    
    Code (markup):
    now add the following css:

    
    div.topWrapSpacer {
        width: 0px;
        height: 100px;
        float: left;
    }
    
    div.DIV {
        float: left;
        clear: both;
    }
    
    Code (markup):
    so basically topWrapSpacer is pushing down the DIV div, but because it has no width, it doesn't affect the text.

    this way, you can keep the DIV div first in the html. this works in firefox and safari, but i haven't tested this out in IE ::shakes fist:: yet.
     
    rikun, Mar 26, 2009 IP
  6. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #6
    Good workaround rikun, but he should learn about floats. Nested divs are fine - just keep them well tabbed in and with names that are easily identifiable.
     
    le007, Mar 26, 2009 IP