Participant

Answered

Text Wrap

5 replies
651 views
Translate

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.

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OSheaCorrect answer

Community Expert

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

Nancy OShea

Correct answer

Community Expert

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>

Translate

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

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.

Translate

I

IraKlugermanAuthor

Participant

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

Translate

Jon Fritz

Community Expert

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...

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.