Known Participant

Answered

Wrapping text around image

Forum|Forum|5 years ago
November 9, 2020
2 replies
1397 views

Hello,

How Can I wrap text around a photo on a webpaage? I'm using CSS.

I looked up some of the web articled and they point to clicking on "Justify" on Properties but this option is no longer there in the latest version.

Thanks

This topic has been closed for replies.

Correct answer Jon Fritz

Dreamweaver's interface doesn't have a button for "Wrap Text", but it can be done from within the CSS Designer Window, you just need to know what setting to change and how to find it.

If you're working outside of the Bootstrap framework in DW, use the steps below. If you are using Bootstrap, someone else should be along to tell you the class name needed to add float:left or float:right to your existing images.

1. Click the image you want wrapped by text in Design View

2. In the Properties window, give the image a unique ID (no spaces, no special characters)

3. Open the CSS Designer under Window > CSS Designer
4. In the CSS Designer, click the <style> tag or the name of the external CSS file under Sources.

a. If you don't have an external CSS file, clcik the + and choose Define in Page. That will create a <style> option
b. If you do have one, or don't want to use Embedded CSS, choose Attach Existing CSS File
5. In the CSS Designer, click the + next to Selectors. This should automatically fill in a selector with the ID from step 2.

6. Hit Enter/Return to create the Selector

7. In the CSS Designer, click the + next to Properties,

8. Make sure the "Show Set" box is unchecked

9. Scroll down to Float (about 1/4 of the way through the list) and click either left or right (there is no float:center)
10. You will also likely need to add a little left and right margin to the image (a little above Float in the list) to keep the text from touching the image

This can be done in a few keystrokes using DW's code hinting, but it does require a basic knowledge of css properties. Nancy's links will likely serve you better than my lists of steps in DW's poorly conceived CSS Designer.

Community Expert

Correct answer

Community Expert

Dreamweaver's interface doesn't have a button for "Wrap Text", but it can be done from within the CSS Designer Window, you just need to know what setting to change and how to find it.

If you're working outside of the Bootstrap framework in DW, use the steps below. If you are using Bootstrap, someone else should be along to tell you the class name needed to add float:left or float:right to your existing images.

1. Click the image you want wrapped by text in Design View

2. In the Properties window, give the image a unique ID (no spaces, no special characters)

3. Open the CSS Designer under Window > CSS Designer
4. In the CSS Designer, click the <style> tag or the name of the external CSS file under Sources.

a. If you don't have an external CSS file, clcik the + and choose Define in Page. That will create a <style> option
b. If you do have one, or don't want to use Embedded CSS, choose Attach Existing CSS File
5. In the CSS Designer, click the + next to Selectors. This should automatically fill in a selector with the ID from step 2.

6. Hit Enter/Return to create the Selector

7. In the CSS Designer, click the + next to Properties,

8. Make sure the "Show Set" box is unchecked

9. Scroll down to Float (about 1/4 of the way through the list) and click either left or right (there is no float:center)
10. You will also likely need to add a little left and right margin to the image (a little above Float in the list) to keep the text from touching the image

This can be done in a few keystrokes using DW's code hinting, but it does require a basic knowledge of css properties. Nancy's links will likely serve you better than my lists of steps in DW's poorly conceived CSS Designer.

Community Expert

Community Expert

If you're using the latest Bootstrap responsive framework, there are several float utility classes available. That said, floats can be erratic. Separate columns are often better for responsive web design (RWD).

Copy & paste this working code into a new, blank document. Save as float-test.html and preview your work in real browsers of various sizes.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
<h2 class="text-info">2 Columns</h2>
<div class="row">
<!--Left side-->
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="placeholder"> 
</div>
<!--Right side-->
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, rerum, modi blanditiis quas repudiandae odio aperiam eaque fugit soluta ullam dignissimos nulla esse corrupti nemo! Totam commodi et facere earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, rerum, modi blanditiis quas repudiandae odio aperiam eaque fugit soluta ullam dignissimos nulla esse corrupti nemo! Totam commodi et facere earum.</p>
</div><!--/col-->
</div><!--/row-->
<hr>
<h2 class="text-info">1 Column with Float</h2>
<div class="row">
<div class="col">
<p><img class="img-thumbnail float-md-right" src="https://dummyimage.com/400x350" alt="placeholder">The image is floated-right on larger devices and stacked vertically on smaller devices. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quaerat praesentium velit ipsum inventore et non, eum sed eligendi vero quas magni odit animi veniam porro temporibus minus fugit reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quaerat praesentium velit ipsum inventore et non, eum sed eligendi vero quas magni odit animi veniam porro temporibus minus fugit reprehenderit.</p>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

DWuser973Author

Known Participant

Thank you for all of your help.

Community Expert

Community Expert

Use CSS Floats.

https://www.w3schools.com/css/css_float.asp

Nancy O'Shea— Product User & Community Expert

DWuser973Author

Known Participant

Thank you, Can I do this from the Design view? without going to the Code view.

Community Expert

Community Expert

Code hints and auto code completion are much, much faster than CSS Designer panels.

Nancy O'Shea— Product User & Community Expert