SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to wrap the text?

    Hi all,
    I want to insert the add in my article page.
    The add covers 40% of the page width...

    Now i want to wrap the text beside the add i.e remaining 60% of the width will flow the text...

    If no image/add in that page, it will display normally...
    See the example, in the left side of this page ...
    NBA's Initial Proposal: Salaries Hard-Capped at $45 Million

    Thanking you...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Not sure about that link you posted, but anyhow, the basic way to make test wrap around an element is to float the element. So if you set the element to, say, float:left and width 40%, it will float left if it's there and text will wrap around it, but if it's not there, the text will be full width.

    Other than that, we need a more specific example.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said the basic premise is just to float the advert. However if you want the advert to be in the middle of some text as in that page you linked to then you can't stick a div in the middle of the p element as that would be invalid.

    Therefore you would need to use a "sandbag technique" using an empty 1px spacer float to push the advert down into the middle of the text.

    Here's the basic example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        border:1px solid #000;
        width:80%;
        margin:0 auto;
        padding:20px;
        overflow:hidden;
    }
    .sandbag {
        float:left;
        height:100px;
        width:1px;
        overflow:hidden;
    }
    .ad {
        clear:left;
        width:300px;
        height:300px;
        border:1px solid red;
        float:left;
        margin:1em 10px 10px 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="sandbag"></div>
        <div class="ad"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis vestibulum velit. Vivamus nec arcu lacus, eu suscipit velit. Nullam laoreet consectetur rutrum. Mauris feugiat, sapien eu consequat placerat, nisi odio pellentesque quam, laoreet venenatis mi erat vitae turpis. Maecenas justo ligula, fringilla eget pretium ut, malesuada et ipsum. Etiam eget lectus velit, quis gravida magna. Proin eleifend egestas feugiat. Cras accumsan ante id tellus laoreet quis adipiscing sem venenatis. Cras odio quam, ornare at elementum id, lacinia non risus. Etiam eget neque varius turpis lacinia vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque suscipit ornare sapien vel dapibus. In quis leo risus, ac viverra nibh. Etiam viverra tempor tincidunt. Donec ultrices ligula nec lectus lobortis auctor. Sed id tempus ipsum. Curabitur pulvinar, est a rhoncus pellentesque, elit erat feugiat velit, in venenatis tellus urna quis neque. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis vestibulum velit. Vivamus nec arcu lacus, eu suscipit velit. Nullam laoreet consectetur rutrum. Mauris feugiat, sapien eu consequat placerat, nisi odio pellentesque quam, laoreet venenatis mi erat vitae turpis. Maecenas justo ligula, fringilla eget pretium ut, malesuada et ipsum. Etiam eget lectus velit, quis gravida magna. Proin eleifend egestas feugiat. Cras accumsan ante id tellus laoreet quis adipiscing sem venenatis. Cras odio quam, ornare at elementum id, lacinia non risus. Etiam eget neque varius turpis lacinia vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque suscipit ornare sapien vel dapibus. In quis leo risus, ac viverra nibh. Etiam viverra tempor tincidunt. Donec ultrices ligula nec lectus lobortis auctor. Sed id tempus ipsum. Curabitur pulvinar, est a rhoncus pellentesque, elit erat feugiat velit, in venenatis tellus urna quis neque. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis vestibulum velit. Vivamus nec arcu lacus, eu suscipit velit. Nullam laoreet consectetur rutrum. Mauris feugiat, sapien eu consequat placerat, nisi odio pellentesque quam, laoreet venenatis mi erat vitae turpis. Maecenas justo ligula, fringilla eget pretium ut, malesuada et ipsum. Etiam eget lectus velit, quis gravida magna. Proin eleifend egestas feugiat. Cras accumsan ante id tellus laoreet quis adipiscing sem venenatis. Cras odio quam, ornare at elementum id, lacinia non risus. Etiam eget neque varius turpis lacinia vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque suscipit ornare sapien vel dapibus. In quis leo risus, ac viverra nibh. Etiam viverra tempor tincidunt. Donec ultrices ligula nec lectus lobortis auctor. Sed id tempus ipsum. Curabitur pulvinar, est a rhoncus pellentesque, elit erat feugiat velit, in venenatis tellus urna quis neque. </p>
    </div>
    </body>
    </html>
    Hope that was what you meant

  4. #4
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply Paul..
    Your code is useful for me..


Bookmarks

Posting Permissions

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