[thelist] Why won't my <h2> behave with floats?

[misterhaan]

since you specified a width on your .floatright, you can add the same 
width (plus some extra for spacing) on the h2 element's right margin.  
this will limit how far the bottom border gets drawn out to the right.

Jason Sweeney wrote:

> The *text* of the h2 elements do to wrap around (or would if you had 
> an h2 elements with enough text to wrap) -- it's the *block-level 
> element* that's not "wrapping". If you edit your source to have a 
> multi-line h2 header, you'll see that the text does wrap around the 
> floated element.
>
> However, the block that contains the h2 element is still spanning the 
> same distance. The border-bottom that you have put in place is styling 
> the block-level element, not the wrapping text. Net result -- the 
> border running under the floated element.
>
> The joys of CSS. :-)
>
> The problem is when you start thinking of it as an "underline" to the 
> text, rather than a border to a block-level element. That border just 
> don't care what the text is doing.
>
> This one has bitten me a couple of times too.
>
> jason sweeney
> jason.designshift.com
>
>
> Jonathan Dillon wrote:
>
>> Howdy all:
>>
>> I'm working on a quick site:
>> http://serverfire.com/
>>
>> It's based on eZ Publish CMS, and I'm having a weird issue with layout.
>> Everything is working, and it's getting towards validation.
>>
>> Meantime, I'm left with this annoying bug, and I can't figure it out 
>> fer me
>> life. 
>> The h2 elements on the site have a dotted underline, and the home 
>> page has a
>> float to the right for a couple of bullet points.  Normally with a 
>> float, I
>> should just be able to float: right and have the content flow 
>> around.  But
>> not so with these H2s.  I'm looking at
>> http://css.maxdesign.com.au/floatutorial/introduction07.htm and 
>> thinking,
>> "This should work."  But I'm sure there is something I am missing.
>>
>> Would one of the CSS folks on the list be able to tell me why it's not
>> working?  Here is the code for the float:
>>
>> #body #rightcolumn {
>>     float: right;
>>     border-top: 1px dotted #e7e7e7;
>>     border-left: 1px dotted #e7e7e7;
>>     float:right;
>>     width:166px;
>>     
>>     padding: 12px;
>>     padding-top: 12px;
>>     margin-top: 0;
>>     margin-left: 20px;
>>     margin-bottom: 20px;
>>     background: url(/design/serverfire/images/sf/sidebox_bg.gif)
>> no-repeat 0 2px;
>>     background-position: bottom right;
>>     background-color: #fff;
>>     margin-top: 24px;
>>     font-size: 90%;
>> }
>>
>> Body looks like this:
>>
>> body { padding: 0; margin: 0; font-size: 12px; font-family: tahoma,
>> sans-serif; letter-spacing: 1px; background: #cdcdcd; color: #454545; }
>>
>> I'm at a loss.
>>
>> Thanks tons!
>>
>> Jonathan
>>
>>
>>
>> Jonathan Dillon-Hayes
>> ---
>> Email: jonathan at boehm-ritter.com
>> http://www.Boehm-Ritter.com/
>>