View Single Post
  #10 (permalink)  
Old March 31st, 2005, 12:28 PM
richard.york's Avatar
richard.york richard.york is offline
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

No problem.

I often think of margin-collapsing as an illusive, ghostly effect in CSS. It took me a while to understand it myself, so I can understand the struggle.

Floated elements don't margin-collapse, ever. They also leave the normal flow of the document, well kind-of. They allow box-model properties of other elements to go behind them, so in that sense they leave the flow, but they affect the content of other elements, so in that sense they don't leave the flow.

In Figure 11-9, the "normal" paragraph margin-collapses with the <div> that encloses it, and the <div> in turn margin-collapses with the <body>. The "floated" paragraph does not margin-collapse, because it is floated. It allows the content that follows it to "float" up beside of it, provided there is room. So you're right, it leaves the flow of the document. But it only leaves the flow for everything except the content of the normal paragraph.

Read on, and continue working through the examples, you might get a better feel for how floating works.

which made sense or where u referring to the second explanation(the reason behind no right margin). The reason u have to why the p elements overflows the body element made sense but The body element hasn't been given an specific width so shouldnt it expand to accomodate the block element it contains(a p element on this case)?
Well I meant to disregard it because I misunderstood your original question.

No, the <body> hasn't been given a width, but your understanding of auto width is a little off. Because it is a block element with auto width, it expands horizontally to fill all of the space available to it, no more and no less. I could say that it is like 100% width, but it isn't the same as percentage width, in percentage width the percentage is calculated based on the width of the element's parent, not based on the space available to it. (Sounds like I'm going in circles doesn't it?) The difference is this:

body {
    width: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;

In percentage width, width equals the width of the <html> element. This causes scrollbars, because the margin, padding and borders are added /on/ /top/ /of/ the width of the <html> element.

body {
    width: auto; /* the default value */
    margin: 10px;
    padding: 10px;
    border: 1px solid black;

In auto width, width equals the space left over after margin, padding and borders have been applied, which is why no scroll bars happen when width is auto.

I'm often thinking of two widths when I am talking about CSS too BTW, which is probably pretty confusing. The first width is the one I'm thinking about when I'm laying out a page, it is margins + borders + padding + width property, I lump them in together because all of these must be factored in when defining an element's width. And then the second width is just the width property itself. I forget that I'm talking to beginners sometimes and tend to be cryptic ;).

I think that you're thinking of the "shrink-to-fit" algorithm, where an element expands to accomodate the content inside of it. Tables, floated elements and fixed/absolutely positioned elements use that algorithm.


Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design