Re: [css-d] Flowing block elements around floated elements

[Dave Sherohman]

On Thu, Apr 30, 2009 at 12:07:50PM +0000, Bobby Jack wrote:
> Hmm ... that markup and CSS should not behave in the way you describe,
> and doesn't for me (at least, the way I've recreated what I think
> you're describing). Can you post an example? Does this happen for you
> in all browsers?

On closer inspection, the markup turned out to be a bit more complex
than I'd originally expected.  The specific use case is a user avatar
and the rendering of a [quote] block by the drupal BBCode module.

The relevant section of the HTML is:

--- cut here ---
<div class="picture">
  <div class="picture">
    <a href="/users/dave-sherohman" title="View user profile.">
      <img 
src="http://www.gravatar.com/avatar/4459bb44e0db5b57cc5e358a71519679?d=identicon&amp;s=85&amp;r=R";
 alt="Dave Sherohman&#039;s picture" title="Dave Sherohman&#039;s picture"  />
    </a>
  </div>
</div>

<span class="submitted">Submitted by <a href="/users/dave-sherohman" 
title="View user profile.">Dave Sherohman</a> on April 29, 2009 - 22:10</span>

<div class="content">
  <p>
    <div class="bb-quote">
      <b>Unknown wrote:</b>
      <blockquote class="bb-quote-body">(quoted text)</blockquote>
    </div>
  </p>
--- cut here ---

(HTML reformatted manually to make the structure more clear.  I have no
idea why it has two nested div.pictures; I suppose that could be a bug
in the gravatar integration module, but it seems harmless in any case.)

The associated CSS for div.picture and div.bb-quote.* is:

--- cut here ---
.front .picture {
  margin-top:-0.75em;
}
.picture {
  float:right;
}
.bb-quote {
  padding:0.25em 1em;
}
.bb-quote b {
  background-color:#666666;
  color:white;
  display:block;
  padding:0 0.25em;
}
.bb-quote blockquote {
  background-color:#EFEFEF;
  border:1px solid #888888;
  padding:0 0.25em;
}
--- cut here ---

The link to see it live (for the moment, at least) is
http://sherohman.org/temporal-perspective

So far, I've only looked at this in Firefox 3.0.10 and not verified how
it behaves with other browsers, on the assumption that, if Firefox
doesn't get it right, nothing else will, either.

-- 
Dave Sherohman
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/