Wrapping text around image

Report · Nov 09, 2020

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

Report · Nov 09, 2020

Use CSS Floats.

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

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

Report · Nov 09, 2020

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

Report · Nov 09, 2020

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

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

Report · Nov 10, 2020

I really appreciate the help but I'm not too comfortable with code as of yet.

Is there a way to do this without using code?

thanks

Report · Nov 10, 2020

Without understanding code (HTML, CSS and to some extent JavaScript), it's unlikely you'll get the results you're hoping for. Nobody here can teach this to you. Spend a few days reading chapters, do some exercises and take quizzes at the end. Trust me. It's time well-spent.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

Good luck!

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

Report · Nov 10, 2020

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.

Report · Nov 10, 2020

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 & Moderator

Report · Nov 12, 2020

Thank you for all of your help.

Report · Nov 12, 2020

This worked. Thank you very much.

Report · Nov 12, 2020

Which solution worked for you?

Please mark it as the correct answer.

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

Wrapping text around image

1 Correct answer