Text Wrap

Report · Nov 13, 2017

Usin Dreamwaeaver 2017. Need to text wrap around graphics. Can anyone show me the code or the process? Everything I've tried does not work.

Report · Nov 13, 2017

To wrap text around an image, place the image in the same container as the text, then use float:left or float:right on the image in its CSS.

You can then add margin settings to push the text away from the image itself.

You'll find Float and Margin properties in the CSS Designer.

Report · Nov 16, 2017

Dear John,

This solution works fine. But I need to know how to place the tex and the graphic in one container. It looks like I’ve got one container for all text and graphics so when I use the flat-lft/rgt everything floats either left or right.

Thanks.

IRA H. KLUGERMAN

Report · Nov 16, 2017

If you are using Bootstrap, the method is different due to all of the many, many, many pre-made classes in that framework.

I do not use BS in any website, so any issue you're having with BS pages and classes would be better handled by other forum contributors who regularly use the framework.

If you're not using Bootstrap, you can create a left and right class. Give those classes the float:left or float:right, then apply them to the images individually as needed.

In the CSS, you could add 2 classes (note they start with a . like below)...

.right-align {
float:right;

}

.left-align {
float:left;

}

Then you would select an image in Design View and choose one of the two classes from the Class menu in the Properties window. That adds the class as below to the html...

Report · Nov 16, 2017

Dont' forget to control your floats by applying overflow:hidden to the parent container in which the floats occur or by clearing the floats after they are no longer needed with a .clearfix class.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 13, 2017

If you're using Bootstrap 3 responsive layouts, use the pull-left or pull-right helper classes.

CODE DEMO:

<!DOCTYPE html>

<head>

<title>Example of Bootstrap 3 Helper Classes</title>

div, p{

margin: 20px;

padding: 20px;

background: #f0e68c;

}

</style>

</head>

<body>

<div class="pull-left">Float to left</div>

<p class="pull-left">Float to left</p>

<div class="pull-right">Float to right</div>

<p class="pull-right">Float to right</p>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Text Wrap

1 Correct answer