Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread Chetan Crasta 
> I put a margin-top of 1px (and more) on div#footer, but did not
> see any effect.

The margin-top had no effect because it was collapsing through
div#wrapper. It worked after I put padding-top:1px on div#wrapper.

~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread sweepslate 

On 12/17/2010 5:34 PM, Eric A. Meyer wrote:

To clarify, the cleared element does have a top margin. It's just that
the top margin is set by the browser to be wide (tall?) enough to push
the element's top outer border edge past the float's bottom outer margin
edge. In other words, the '10px' value is overridden by the browser
because it needs more than 10px of top margin to push the cleared
element down far enough. If that were changed to, say, '1px' then
you'd see the top margin in full force.



Thanks guys!

I can get immediatly what Tim and Eric talk about, but after reading 
Chetan's proposal I think there's still a lot that I don't understand 
about CSS.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread Chetan Crasta 
>  In other words, the '10px' value is overridden by the browser because it
> needs more than 10px of top margin to push the cleared element down far
> enough.  If that were changed to, say, '1px' then you'd see the top
> margin in full force.

I put a margin-top of 1px (and more) on div#footer, but did not
see any effect.

~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread Eric A. Meyer 

At 10:00 AM -0500 12/17/10, Tim White wrote:


On Fri, Dec 17, 2010 at 9:39 AM, sweepslate  wrote:


 I have two floats, one next to the other, content and side. There is a third
 box under them, the footer. I'd like the footer to have some margin-top, but
 I can't manage that, even with clear:both.
 


 if you put clear:both on your footer it will be pushed down just
far enough to clear the floats; and thus no 'extra' margin.


   To clarify, the cleared element does have a top margin.  It's just 
that the top margin is set by the browser to be wide (tall?) enough 
to push the element's top outer border edge past the float's bottom 
outer margin edge.  In other words, the '10px' value is overridden by 
the browser because it needs more than 10px of top margin to push the 
cleared element down far enough.  If that were changed to, say, 
'1px' then you'd see the top margin in full force.
   As Tim says, the usual solution is to set your ten pixels on the 
bottom margin(s) of the floated element(s), not the top of the 
cleared element.


--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
  -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread Chetan Crasta 
The reason that the margin-top on the div#footer has no effect on the
floated div#content and div#side is floated boxes are not in the flow
and are therefore "invisible" to other block boxes.

You have three options to create the 10px gap:
div#content , div#side
{
 margin-bottom:10px;
}

Or:
div#footer
{
  position:relative;
 top:10px;
}

Or you can float the div#wrapper and div#footer:
div#wrapper
{
 float:left;
}
div#footer
{
 float:left;
width:100%;
margin-top:10px;
}

~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] the box that clears float can't have margin?

2010-12-17 Thread Tim White 
On Fri, Dec 17, 2010 at 9:39 AM, sweepslate  wrote:

> I have two floats, one next to the other, content and side. There is a third
> box under them, the footer. I'd like the footer to have some margin-top, but
> I can't manage that, even with clear:both.
> 

Per the spec:
"Then the amount of clearance is set to the greater of:

   1. The amount necessary to place the border edge of the block even
with the bottom outer edge of the lowest float that is to be cleared.
   2. The amount necessary to place the top border edge of the block
at its hypothetical position. "
http://www.w3.org/TR/CSS2/visuren.html#flow-control

So, if you put clear:both on your footer it will be pushed down just
far enough to clear the floats; and thus no 'extra' margin.

To get the space you want, try adding margin-bottom: 10px to your content.

Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/