[The_Equivocator]

All right, so I'm learning CSS, and I'm having trouble getting something to work. I have a "box" containing "items". Each item contains an "itemtitle" and "itemcontent". Each "itemcontent" in turn has a "date" and a "guts" section. I'd like to be able to have the occasional "guts" with an image right-aligned at the end of the "guts", allowing for text to flow around the image to the left. The problem is that the border around "itemcontent" doesn't account for the image, so the image usually hangs outside of the border. Can anyone tell me what I'm doing wrong?

Here's the HTML:

Code:
<.div class="item">
  <.div class="itemtitle">
    Welcome!
  <./div>
  <.div class="itemcontent">
    <.div class="date">
      Wednesday, February 05, 2003 @ 3:17 PM CST
    <./div>
    <.div class="guts">
      <.div class="floatingimage">
        <.img src="images/balloons.jpg" alt="Welcome!" height="200" width="150" />
      <./div>
      Lots of text goes here!
    <./div>
  <./div>
<./div>

Here's the CSS:

Code:
div.item
{
	margin:1em;
	background: white;
}

div.itemtitle
{
	margin: 0 0 3px 0;
	font-size: 1.2em;
	font-weight: bold;
}

div.itemcontent
{
	background: white;
	border: solid;
	border-color: gray;
	border-width: thin;
	padding: 0.2em;
	margin: 0em auto 0em auto;
}

div.date
{
	margin: 0 0 1em 0;
	font-size: 0.70em;
	font-style: italic;
}

div.floatingimage
{
	float: right;
}

div.guts
{
	margin: 0 0 0 0;
}

[Millennium]

Could we get a link to a test page, rather than just these snippets?

When I based a test page on your code, I saw the problem, only it's not entirely a problem. You see, you aren't actually doing anything wrong. The CSS spec states that when the browser calculates the height of an object, any floating objects inside it -such as your image- don't count. So if your image is the tallest thing in the page, then it will hang outside of the box. Frankly, that's a rather dumb part of the standard, but it's a part of the standard.

However, there is a way around it. The float rule has a counterpart: clear. This rule can take a value of 'left', 'right', or 'both'. If it's 'left', then nothing can float to the item's left; it will be pushed down until nothing is floating to its left. Similar story for 'right'. If it's 'both', then it gets pushed down until nothing is floating on either side.

Why is this important? Because this item gets counted in the box height. So if you have something like this at the bottom of every box, you can make sure the image is always inside. You could do this with a quick DIV tag:

Code:
<.div style="clear:both;">&nbsp;<./div>

However, this will clutter your code. What I'd suggest is to move your "date" div to the bottom of the box, rather than the top, and use it as your footer.

I use a technique very similar to this for my own blog; I have different names for my classes, but I float "current mood" boxes this way, and on my Friends page I also float friendpics.

I know my code doesn't quite validate. You can blame LiveJournal for that; its mood icon system doesn't use valid HTML, much less valid XHTML. So for now I'm stuck with HTML 4.01 Transitional, something I'm not happy about. But neither can I move my blog, since my friends and I rely heavily on LJ's Friends functionality to keep in touch. But everything that I can make validate, I have, with decent results. One warning: Safari doesn't like dotted borders much (it draws them as dashed, and on the wrong sides to boot), which is a problem because I do like them. But for now I've just let it slide; changing to solid borders would fix the problem but I find solid borders to be boring if overused.

[linchpin]

This solution assumes that there is enough text in the "guts" box to flow past the height of the image.

Code:
<.?xml version="1.0" encoding="iso-8859-1"?>
<.!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>
<.title>Untitled Document<./title>
<.meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<.style type="text/css">
div.item
{
	margin:1em;
	background: white;
}

div.itemtitle
{
	margin: 0 0 3px 0;
	font-size: 1.2em;
	font-weight: bold;
}

div.itemcontent
{
	background: white;
	border: solid;
	border-color: gray;
	border-width: thin;
	padding: 0.2em;
	margin: 0em auto 0em auto;
}

div.date
{
	margin: 0 0 1em 0;
	font-size: 0.70em;
	font-style: italic;
}

Removed div.floatingimage

div.guts
{
	margin: 0 0 0 0;
}
<./style>
<./head>

<.body>
<.div class="item">
  <.div class="itemtitle">
    How Apache Came to Be
  <./div>
  <.div class="itemcontent">
    <.div class="date">
      Wednesday, February 05, 2003 @ 3:17 PM CST
    <./div>
    <.div class="guts">

Removed <.div class="floatingimage><./div> tags and added the code in green.

      <.p><.img src="images/balloons.jpg" alt="Welcome!" height="200" width="150" align="right" /> 
        In February of 1995, the most popular server software on the Web was the 
        public domain HTTP daemon developed by Rob McCool at the National Center 
        for Supercomputing Applications, University of Illinois, Urbana-Champaign. 
        However, development of that httpd had stalled after Rob left NCSA in 
        mid-1994, and many webmasters had developed their own extensions and bug 
        fixes that were in need of a common distribution. A small group of these 
        webmasters, contacted via private e-mail, gathered together for the purpose 
        of coordinating their changes (in the form of "patches"). Brian Behlendorf 
        and Cliff Skolnick put together a mailing list, shared information space, 
        and logins for the core developers on a machine in the California Bay 
        Area, with bandwidth donated by HotWired.<./p>
      <.p>The early Apache server was a big hit, but we all knew that the codebase 
        needed a general overhaul and redesign. During May-June 1995, while Rob 
        Hartill and the rest of the group focused on implementing new features 
        for 0.7.x (like pre-forked child processes) and supporting the rapidly 
        growing Apache user community, Robert Thau designed a new server architecture 
        (code-named Shambhala) which included a modular structure and API for 
        better extensibility, pool-based memory allocation, and an adaptive pre-forking 
        process model. The group switched to this new server base in July and 
        added the features from 0.7.x, resulting in Apache 0.8.8 (and its brethren) 
        in August.<./p>
      <.p>After extensive beta testing, many ports to obscure platforms, a new 
        set of documentation (by David Robinson), and the addition of many features 
        in the form of our standard modules, Apache 1.0 was released on December 
        1, 1995.<.br />
      <./p>
      <./div>
  <./div>
<./div>
<./body>
<./html>

If you don't have enough text to keep the image inside the grey border, you can do one of two things.

One, you could add lots of line breaks to the end of the text to expand the "guts" box downward, but that's messy.

A better solution would be, if you know the height of the image just find:

Code:
<.div class="guts">

and replace with:

Code:
<.div class="guts" style="height:250px;">

changing the code marked green to equal a little bit more than the height of the image.

[The_Equivocator]

Originally posted by Millennium:

Code:
<.div style="clear:both;">&nbsp;<./div>

Yeah, that works nicely. I also found another way to get around it, but it's a little more "hack-like". If you stick the image and the text inside a one-celled table, the box will adjust to contain the entire table.

Again, thanks!