CODEWITHSUNDEEP
css
David Casillas
David Casillas

Reputation: 21

CSS - margin and float property

  1. We have a div with static positioning. Inside we have a paragraph with a margin. The height of the div will be the paragraph without the margin

  2. We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.

What is the explanation of this?

Here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="nivel1">
<div id="nivel21">
    <p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
    <p>Este es el primer parrafo</p>
</div>
</div>

</body>

</html>

And the CSS code:

body {
    margin:0;
    padding:0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:2em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:2em;
    background-color:#FC0;
}

And here is a link to the test site.

Upvotes: 1

Views: 8220

Answers (4)

chris
chris

Reputation: 1718

After several edits, I think I have got the answer now :)

I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block- level child box.

Those "certain cases" listed in section 10.6.6 include floating elements.

The #nivel21 element in the question is a floating element, and it contains block-level children (a <p>), therefore this special-case rule is applied and the height of the <div> is calculated using the top and bottom margin-edges of the <p> tag.

Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the <p> tag:

The [...] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [...]

The <p> tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the <p> tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the <p> tag.

I hope this answer makes sense to someone other than me!

Upvotes: 1

Sergey Orshanskiy
Sergey Orshanskiy

Reputation: 7054

This happens because of the interaction of the two divs. Remove the floating one, the static one will shrink. What happens is, the floating div pushes the text in the static div down, thus expanding it.

More comments: The paragraph tag is irrelevant here. You can achieve the same effect by removing the paragraph margin and increasing the margin for the elements themselves. Either way, the statically positioned element would grow while the floating one would not. Same thing with this CSS:

body {
    margin:0;
    padding:0;
}

p {
    margin: 0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:5em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:5em;
    background-color:#FC0;

}

Upvotes: 0

Bastiaan Linders
Bastiaan Linders

Reputation: 2141

Well, since there is no question and no clear naming of your elements i'll just assume you want to put 2 columns in a container. Cleaned up code with some more clear naming and use of classes results in this: (hope this is what you were looking for)

<html>
  <head>
    <title>divs</title>
    <style>
      .container{
      float: left;
        background-color: #0F3;
      }
      .column {
        margin: 2em;
        float: left;
        padding: 5px;
      }
      #lefty{
        background-color: #C00;
      }
      #righty{
        background-color: #FC0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="lefty" class="column">
        <p>Column number 1</p>
      </div>
      <div id="righty" class="column">
        <p>Column number 2</p>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

Ravi Vyas
Ravi Vyas

Reputation: 12375

I think When you use the float property the browser pads the element to show is floating.

Upvotes: 0

Related Questions