Hi,
is this what you were looking for (I wasn't quite sure)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DIV difficulty</title>
<style type="text/css">
#content {
width: 100%;
border: 1px solid red;
}
.imagebox {
border: 1px solid blue;
float:left;
text-align:right;
}
.credit {
text-align:right;
font-family: sans-serif;
font-size: small;
}
.clearer {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
</style>
</head>
<body>
<div id="content">
<p>Article text blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah.</p>
<div class="imagebox"> <img src="div.jpg" height="400" width="300" alt="Swarthmore test image" />
<div class="credit">Photo by John Smarkes</div>
</div>
<div class="clearer"></div>
<p>More article text blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah.</p>
</div>
</body>
</html>
The problem with static elements is that default to width auto which is effectively 100% unlike absolute elements which default to content width. It would be nice if css allowed both for both but it doesn't.
If you float an image then the float takes the intrinsix width of the image otherwise it may default to 100% or it may default to content width depending on browsers.
In the above I have just tricked the browser into floating the element at the images width and then right aligning the text inside the float.
Hope that helps.
Paul
Bookmarks