How does the margin work?
css, css-float, html
Solution
Interaction of Margins and Floated Elements
Demo HTML and CSS: http://jsfiddle.net/audetwebdesign/2Hn7D/
In this example, `.wrap` is the parent, containing block element with a fixed width of 600px and centered horizontally using a standard method, `margin: 0 auto`.
Within the parent block, there is an block level element, `div.marginfix` with some text (for illustation purposes). As such, `div.marginfix` is in normal flow and in a block formatting context. Its width will extend to fill the width of the parent container.
The parent block also contains two floated elements, `div.one` and `div.two`, floated left and right respectively, both having `width: 200px`.
A CSS compliant browser will follow the CSS block formatting model to lay out the content in the following manner:
(1) Ignore the floated elements and then compute the layout for the remaining in-flow elements (`.marginfix`) adjusting for margin, padding, line-height, inline elements and so on.
(2) Determine the space required to place the floats such that the left floated element is flush with the left edge of the parent, the right floated element is flush with the right edge of the parent, and both have their top edges adjacent to the top edge of the parent element.
(3) Adjust the width of the line boxes (the imaginary boxes around the text in the child `div`'s) as needed to allow the text of the normal flow elements to wrap around floated elements.
Basic Example
In the simplest case, the text within `.marginfix` wraps around the two floated elements and extends to the left and right edges of the parent element once the text has cleared the floats.
Example 2 - Add Margins
If you add left and right margins to `.marginfix`, the width of the in-flow div is computed to be {width of parent - left margin - right margin}, so the text is constrained to the center of the layout. A similar effect would result from using padding.
It is important to note that the text formatting in this example would be the same even if one or both of the floated siblings were removed.
Example 3 - Changing the Order of the Elements
When using floats, the order of the elements makes a difference.
Consider the following variation, place `.marginfix` between the two floated `div`'s:
<div class="wrap ex3">
<div class="one mark">one - add some text to make it taller for effect.</div>
<div class="marginfix">three - Nulla vehicula libero... </div>
<div class="two mark">two - single liner</div>
</div>
In this case, the text from `.marginfix` will wrap around the left floated element.
However, the right floated element now appears after the in-flow block, and for this reason, the `.two` element is flushed to the right (as expected) and to the bottom edge of the nearest block level element, in this case, `.marginfix`.
Any margins or padding applied to `.marginfix` would simply extend the height of the inflow element and `div.two` would still be positioned after it (see Example 4).
Example 5 - Establishing a New Block Formatting Context
It you apply `overflow: hidden` to `.marginfix`, the CSS formatting model starts a new block formatting context, which means that `.marginfix` will not extend beyond any edges of any any adjacent floated elements.
In this example, the text from `.marginfix` no longer wraps around the left floated element.
As before, the right floated `div` is still positioned after `.marginfix` since `.marginfix` is still a block level element.
Problem
I have provided below `marginfix` which is a block level element and `one` and `two` are also block level, but these are floated. That is the reason why they are on same line of layout, but `marginfix` is not floated either, and block level element should go below the element as the following ``` +--------------------+ +--------------------+ | | | | +--------------------+ +--------------------+ +--------------------------+ | | +--------------------------+ ``` But it works like this ``` +--------------------+ +--------------------------+ +--------------------+ | | | | | | +--------------------+ +--------------------------+ +--------------------+ ``` This is the HTML ``` <div class="wrap"> <div class="one">one</div> <div class="two">two</div> <div class="marginfix">three</div> </div> ``` CSS ``` .wrap{ width: 500px; background-color: red; position: relative; margin: 0 auto; } .one{ width: 200px; float: left; } .two{ width: 200px; float: right; } .marginfix{ margin: 0 210px; } ``` UPDATE NOTE Someone may say `marginfix` contain the remaining space of the floated elements. If so, why it wouldn't work if we change the order of the html element. This html won't work as above html ``` <div class="wrap"> <div class="one">one</div> <div class="marginfix">three</div> <div class="two">two</div> </div> ``` So how does the margin value work?