[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