[thelist] Why won't my <h2> behave with floats?
Jason Sweeney
jason at designshift.com
Thu Apr 28 14:47:32 CDT 2005
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/
>
More information about the thelist
mailing list