1

Here is a simplified example to what I had before with markup and style. I have asked a similar question before but haven't received an answer I fully understand. You may give a simple example to better explain why I must use clear:both to make padding-top work. I do want to really understand float and clear.

So my question is: I still can't understand why I must use clear:both in the #message declaration to make this declaration work 

#message p 
{
    padding-top: 30px;
}

<!DOCTYPE>
<html>
  <head>
    <title>testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
      body 
      {
       text-align: center;
       width: 768px;
     }

     #register 
     { 
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
       list-style: none;
       color: #690;
       background: #BDDB62;
     }

     #message 
     {
      clear: both;
      text-align: center;
      background: #92B91C;
    }

    #message p 
    {
      padding-top: 30px;
    }
  </style>
</head>

<body>
  <div id="register">
    <p style="float:left">We float left</p>
  </div>

  <div id="message">
    <p>Paragraph after floated element</p>
  </div>
</body>
</html>
Robbie JW
  • 729
  • 1
  • 9
  • 22
user2658578
  • 365
  • 2
  • 5
  • 3
    Read this: http://stackoverflow.com/questions/12871710/why-clear-both-css – Joe_G Aug 08 '13 at 19:30
  • Is ` ` allowed by itself? I thought it always had to have `html` after it (for HTML5), making it ` `... – Robbie JW Aug 08 '13 at 19:53
  • @RobbieJW - right, but there's no statement that it is html5, nor that it's compliant with any other specification of HTML. So there's nothing to "allow" or "disallow" it. All we can say, is that ` ` will cause quirks mode in browsers. – Alohci Aug 09 '13 at 08:34

2 Answers2

2

The reason that you need clear:both is that your register div is floating, and your message div is not floating, therefore it is just going to follow register along in the layout of the page.

Adding clear:both will cause it to essentially break out of that flow and be inserted as a normal div would. The padding is the icing on the cake by moving it down a bit to give you some room.

(Hopefully I understood your question...I didn't get a chance to run your code).

erik
  • 3,810
  • 6
  • 32
  • 63
1

Good question. First remind yourself of this diagram from the CSS spec: http://www.w3.org/TR/CSS2/images/boxdim.png.

Note that the "content" box is just the inner most text area.

The float rules (http://www.w3.org/TR/CSS2/visuren.html#float-position) say

float:left

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

Now take a look at http://jsfiddle.net/hBwD7/1/ . There's three tests there. Test one, shows what happens when the float is only half the available width. See that the area covered by the message p element is depicted by the red box, which includes the padding, surrounds the area of the float element. From the perspective of the padding, the float doesn't exist at all. Because it's only the content that flows around the float.

Test two shows that if we increase the padding, eventually the content will drop down under the float.

Test three shows that increasing the width of the float to 100% doesn't change things. from the perspective of the padding, the float doesn't exist. So the padding is simply covered by the float. The float though, can't cover the content, so it appears immediately below the float.

However, if you add clear:both, (http://www.w3.org/TR/CSS2/visuren.html#flow-control) then an additional rule applies:

clear:both

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

The top border edge of the message must be now be entirely below the float, The border box contains the padding box, so the padding must start below the float, and the 30px of top padding is shown above your text content.

Alohci
  • 78,296
  • 16
  • 112
  • 156