ansaurus

Question

Answer 1

A:

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

Ravi Vyas 2010-04-29 22:43:55

What you mean with "pads the element"?What exectly seems to happen is that the floated div calculates its heigth (as you can see by the background color) as the inner parragraph plus its margin, while the non floated div just the parragraph without its margin. There is no padding here.

David Casillas 2010-04-30 07:54:55

what I meant was some the browser may be internally increasing the top and bottom padding to visually show that the element is floating and is not inline with others, But I am just shooting in the dark :P

Ravi Vyas 2010-04-30 12:32:08

Answer 2

A:

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>

Bastiaan Linders 2010-04-29 23:03:32

I'm really sorry I did not explain myself clearly.I'm just experimenting to learn the CSS properties. I discovered that when I switched a div from static to floated it changed the way its heigth was calculated, so I just made a test page with two equal div , just one static and one floated to study the diferent behaviours. I know now clearly what is happening with Safari Web Insector, the floated div adds to its heigth the inner parragraph plus its margin, while the static one don't adds the inner parragraph margin. Why this happens?

David Casillas 2010-04-30 08:00:54

I think you misunderstand margins. A margin is added to the outside of a box, increasing it's distance from it's parant or siblings. Padding is a sort of inner margin, increasing the distance it's children have from it's borders.So, the question really is why the red one is bigger, not why the yellow one is smaller ;)

Bastiaan Linders 2010-04-30 14:21:17

Ok, now that we have a good question, would be nice to hear an answer if any of you can give an explanation. Anyway thanks, and I will try to be more precise next time.

David Casillas 2010-04-30 20:07:54

Answer 3

A:

Try reading this blog about CSS Positioning, it may help you frame your question more effectively.

Mike 2010-05-02 02:36:37

Thanks, I have been reading "The Ultimate CSS Reference", and have discovered that there should be a margin collapsing issue. In your link this is confirmed. This is what its said:"Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it."So this seems to close the subject.

David Casillas 2010-05-02 22:06:13

ansaurus

tags:

views:

answers:

CSS - margin and float property

related questions