How to wrap the text?

HTML & CSS
1

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

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.

3

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.


<!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 :slight_smile:

4

Thank you for your reply Paul…
Your code is useful for me…

5