W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: margins, ems and context

From: Anton Prowse <prowse@moonhenge.net>
Date: Thu, 27 Jan 2011 01:31:22 +0100
Message-ID: <4D40BCDA.8020104@moonhenge.net>
To: www-style@w3.org
CC: Alan Gresley <alan@css-class.com>
I should know better than to write posts on the way out the door! 
Clarification needed:

On 26/01/2011 20:09, Anton Prowse wrote:
> On 26/01/2011 19:15, Alan Gresley wrote:
>> On 27/01/2011 4:51 AM, Alan Gresley wrote:
>> <!DOCTYPE html>
>> <style type="text/css">
>> .container p { margin: 1em 3em }
>> .container h1 { margin: 1em 1.5em }
>> </style>
>> <div class="container" style="width: 800px; margin: 0 auto; border: 10px
>> solid blue;">
>> <div style="float:left; width: 100%; background: lime;">Float</div>
>> <h1>Heading</h1>
>> <p>text</p>
>> </div>
>> The only work around that I know of is to wrap the <h1> and <p> in
>> another element and apply the padding to it.
> Ah, now I understand you. It's not the use of 100% that's the problem
> (unlike what I claimed in my previous reply when I wasn't aware of your
> use case; although I still very much question the use of 'float', but
> that's a whole different tangent).

Actually, it /is/ the 100% that's the problem: it's only needed because 
'float' is being used, and floats have shrink-to-fit behaviour.  If you 
simply use an in-flow block-level box instead, you don't need to specify 

> I'm presuming that the float represents a navigation bar or something.
> The problem is that this particular block-level element needs to occupy
> the full horizontal space between the borders of the container.
> To achieve that, you use padding on the container to set the default
> offset of its children. Then you give the navbar a 100% width and a
> horizontal padding equal to that default offset,(*)

... and then you don't need to specify any horizontal padding...

> and you should use
> negative horizontal margins on the navbar (which is precisely what
> negative horizontal margins are designed for) to "pull" the navbar
> leftwards over the container's left padding, and to "allow" the navbar
> to sit over the container's right padding.

...and you merely need to add negative horizontal margins as just 

> This is an extremely common design pattern. It's frequently used for
> call-out boxes on web pages which consist of an image which stretches
> from side to side and some text underneath which is indented from the
> call-out's border:
> -------------------
> |-----------------|
> ||               ||
> ||               ||
> ||               ||
> |-----------------|
> |   texty txt a   |
> |   foo txt tex   |
> |                 |
> |   bar txty tx   |
> |   txt texty a   |
> -------------------

...which is exactly what this diagram shows (in which the image isn't a 
float and doesn't have horizontal padding).

> You may be questioning why, then, this technique is "right" and the
> other "wrong", given that this technique also has problems.

This particular technique doesn't in fact have problems; it is the 
correct solution.

The explanation of why a technique can be regarded as the correct 
technique even when it has problems can wait for another time when an 
appropriate scenario surfaces on this list.

Anton Prowse
Received on Thursday, 27 January 2011 00:31:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:55 UTC