ansaurus

Question

Can I float a block of text like an image?

Answer 1

A:

This is the example on the W3schools site adapted for floating text. Changes are on lines 4 and 20.

<html>
<head>
<style type="text/css">
div
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p>
<div>This is floated text. This is floated text. This is floated text.</div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

You can also use <div style="float:right">text</div> if you don't want to float every div element.

Edit: To get the floating text halfway down the page, you just stick <div style="float:right">This is an annotation</div> right in the middle of the <p> block.

Grant 2010-06-10 16:50:10

Answer 2

A:

Can be done:

    #CONTENT .calloutBox{
    background-color:   #1c5a80;
    color:              Black;
    float:              right;
    margin-left:        10px;
    width:              175px;
}

And just wrap what you want in <div class="calloutBox">...</div>.

Ken Ray 2010-06-10 16:51:29

ansaurus

tags:

views:

answers:

Can I float a block of text like an image?

related questions