Re: margins, ems and context

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 
width:100%...

> 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 
described...

> 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.

Cheers,
Anton Prowse
http://dev.moonhenge.net

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