How to float image to bottom right?

**artcoder** · 06-29-2007, 11:10 AM

Below is a picture of what I want to achieve...

See how there is a div around the text and picture. But I want the picture on the lower right.

Below is the code that I'm attempting to use ...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.panel {
 border: 1px solid #00c;
 margin: 20px 20px 0px 20px;
 background-color: white;
 padding: 0px;
 width: 300px;
}
</style>
</head>
<body>
<div class="panel">
There is some text here that I want to wrap around the picture which should be banked to the bottom right of this panel.
<br /><br />I want the text to fill the area of left of the happy face.<br /><br />
Right now, the happy face is taking up the whole bottom area.
<img src="happy.gif" style="float:right;" />
</div>
</body>
</html>

As you can see on this page, it is not coming out like I wanted. The text is not flowing down into the level of the picture.

Any suggestions?

**Riane** · 11:28 AM

You're just floating the image to the right, and not really specifying anything else for it to do.

What you can do is create a class the the image, say "bottom-right."

Code:

img.bottom-right{
    border: 0;
    padding: 0;
    margin-left: 10px;
    margin-top: 10px;
    float: right;
}

The margin left/top has a 10px which allows the text to wrap the image on the top and left side without running straight into the image. You can change it for more space or less space.

And in your image you would just have (remember with XHTML Trans 1.0, you have to list an alt attribute, as well as the closing backslash.)

Code:

 <img src="image.gif" class="bottom-right" alt="image" />

Since you are using an XHTML 1.0 Trans doctype, you might want to create stylesheet.css, and put all of your CSS in that file, then link it in your header. And don't forget that you need to close your linebreaks: <br />

**LadynRed** · 06-29-2007, 03:16 PM

In order to make FF "wrap" the floated element, you must CLEAR the float. You can read how that's done here: http://css-discuss.incutio.com/?page=ClearingSpace