How does the margin work?

Question

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?

Answer 1

re: your edit - the css "clear" property makes the current element sit below any floated elements that come before it in your HTML. Therefore, if you change your HTML to the following:

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

div class="one" will be "cleared" but div class "two" will not.

Answer 2

 This is HTML:
 =================

 <div id="container">
    <div id="one"><h1>hello world1</h1></div>
    <div id="two"><h1>hello world2</h1></div>
    <div id="three"><h1>hello world3</h1></div>
 </div>

 CSS
 ====
  #container
    {
        height: 1024px;
        width: 760px;
        position: fixed;
    }

    #one
    {
        margin-left: 10px;
        position: relative;
        border: 2px solid red;
        width: 220px;
    }
    #two
    {
        margin-left: 272px;
        position: absolute;
        border: 2px solid Blue;
        width: 220px;
        float: right;
    }
    #three
    {
        border: 2px solid Green;
        float: right;
        margin-top: -86px;
        position: relative;
        width: 220px;
    }

Answer 3

I think first answer by Chapurlink makes sense, have modifies his fiddle, see the answer,

that works as you have explained/expected, white box is div three with clear:both

See the fiddle

I hope this is in context to your question.

Answer 4

Floats are removed from the normal flow of content. When you apply floats to a div margins do not see the floated div as an actual element that is till you apply a clear: both. see jsfiddle

.one{
 width: 200px;
 float: left;
 clear: both;
}

.two{
  width: 200px;
  float: right;
  clear: both;
}

.marginfix{
   margin: 0 210px;
}

Now it sounds like you are trying to achieve a positioning where the marginfix pushes the div to the middle. If that is the concept, place display: block on marginfix. See jsfiddle

.one{
  width: 200px;
  float: left;
}
.two{
 width: 200px;
 float: right;
}
.marginfix{
  margin: 0 210px;
  clear: both;
}

Margins push elements around an element. Since floats are outside of the normal flow, margins push from the edge because it doesnt see the element as a boundary. Think of the boundary as element that has clear: both with float as well. Now it will see it as an element.

Here is the even stranger issue. When both of the float left and right have clear both the float right gets pushed down. But if you attach clear: both to marginfix it pushes it down like in your first example.

Answer 5

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.

Answer 6

When you float any element to left then other elements go in the same line of layout if you haven't cleared the floats and that's why marginfix is set exactly after the float left even if you haven't set a margin value to marginfix and the remaining of the elements go toward the left edge from line (when one height is achieved) and likely to two if your one and two is not enough height as marginfix but here you have set marginfix a margin value so it remains in the same pillar.

Play with this fiddle

Answer 7

Play with the jsfiddle. I have converted your code to the fiddle. And for each div there is different background color. Play with various float values. And the change in the layout will be clear to you from the different colors of the boxes.

inherit
left - floats the box to the left with surrounding content flowing to the right.
right - floats the box to the right with surrounding content flowing to the left.
none (default)

If you do not want the next box to wrap around the floating objects, you can apply the clear property:

clear: left will clear left floated boxes
clear: right will clear right floated boxes
clear: both will clear both left and right floated boxes.

Refer html dog tutorial on page layout for more details about layout using css

Answer 8

That happened because both the class .one and .two were floated, leaving 100px space between them. That's where the .marginfix will fill in. If you want the .marginfix to be placed below them and is aligned center, assign clear:both; to place it below them and use margin:0 auto; to make it centered.

Answer 9

That's how floats work - they are removed from the normal flow of content. If you want to force .marginfix to sit below the others, add .marginfix{clear: both;} to your styles.