Dreamweaver Tutorials - Image Position

Postioning an image with CSS in Dreamweaver

Floating ( Positioning ) an image to either the left or right of a block of text is very simple to do with CSS and Dreamweaver, however beginners often have problems with this simple concept, this tutorial will show you just how easy this is to achieve.

Watch this tutorial on Video.

1. Create a DIV Tag
First let’s create a div (a div creates a container and allows attributes to be applied to control it’s properties).

To create our div element we go to Insert > Layout Objects > Div Tag

Dreamweaver adds the div element to our page.
Remove the default text that Dreamweaver adds and then place your cursor inside the div and click, this sets the insersion point for our image.

2. Insert the image

Next we insert our image: by clicking on Insert > Image

The image is now nested inside our Div tag, if we text it displays toward the bottom of the image, not really what we want, we want to text to sit nicely on the left of the image.

Open up the code view by clicking on the code button top left

Your image tag will look something like this:-

<img src="images/multi-user-cds.jpg" width="268" height="229">

Add this to the image tag style=”float:left;”

Your image tag should now read:-
<img src="images/multi-user-cds.jpg" width="268" height="229" style=”float:left;”>

3. Add the text
We then create an other div tag just below the image tag, this makes positioning a lot easier and more predicable, the text has now positioned it’s self nicely to the left.

So the text does not butt right up to the image, we just need to add a margin left parameter  to the text div tag:
style="margin-left:270px;

The finished code should look like this:-

<div> <img src="images/ImageName.jpg" width="268" height="229" style="float:left;"/> <div style="margin-left:275px;">Text that we what to display to the left of the image goes in here. </div> </div>

And that’s it, that’s how simple it really is