Why does css float add padding from child elements to the parent element?

Question

I encountered a problem/thing I can't understand when coding a website.

I have two columns, using float: left (and margin: 0, padding: 0) Inside the columns are blocks

When the blocks are empty there's no problem, I can even add text to it without using <p> tags. But when I add <p> tags in the blocks the parent columns get some padding added.

When I don't use float:left (so only one column) however I can use the <p> tags inside the blocks without padding added to the parent element.

Surely I can come up with some sort of fix, but I also want to understand why this happens and if anyone knows how, how to revert this strange behaviour.

I have a live problem demo working here.

<style>
#html, body{
       margin: 0;
       padding: 0;
       height: 100%;
       font-size: 100%;
}

#pagewrap {
       padding: 0 20px;
       width: 960px;
       height: 100%;
       margin: 0 auto;
       background: #CCC;
}

.test {
       width: 100%;
    height: 100px;
       margin: 0;
       padding: 0;
       background: #00F;
       clear: both;
}

.column {
       width: 480px;
       margin: 0;
       padding: 0;
       float: left;
       background: #0F0;
}

.column2 {
       width: 480px;
       margin: 0;
       padding: 0;
       background: #0F0;
}

.lefty {
    min-height: 100px;
       width: 470px;
       margin: 0 10px 10px 0;
       padding: 0;
       background: #999;
}

.righty {
       min-height: 130px;
       width: 470px;
       margin: 0 0 10px 10px;
       padding: 0;
       background: #999;
}

</style>

<div id="pagewrap">

    <div class="test"></div>

    <div class="column">

        <div class="lefty">
        <p></p>
        </div>

        <div class="lefty">
            <p></p>
        </div>

    </div>

    <div class="column">    

        <div class="righty">
     
        </div>

        <div class="righty">

        </div>

    </div>

    <div class="test"></div>

<div class="column2">

        <div class="lefty">
    
        </div>

        <div class="lefty">

        </div>

    </div>

    <div class="test"></div>

<div class="column2">

        <div class="lefty">
        <p></p>
        </div>

        <div class="lefty">
        <p></p>
        </div>

    </div>

    <div class="test"></div>

</div>

Answer 1

Instead of using floats: which are pretty hacky/have cross-browser problems (I believe), you should consider styling your elements with inline-block

Ie, for an element you want to have in a row:

#wrap {
width:100%;
}

#main_container {
     margin:0 auto;
     width:1000px;
}

#column {
    display:inline-block;
    *display:inline;zoom:1; //ie7 hack, does not affect other browsers
    width:200px; height:200px; background:#aaa;
}

#content {
    display:inline-block;
    *display:inline;zoom:1;
    width:600px; height:600px; background:red;
}

HTML

<div id="wrap">
    <div id="main_container">
        <div id="column">list of items</div>
        <div id="content">paragraph content</div>
    </div>

</div>

and do not forget to put a CSS reset at the BEGINNING of your CSS file

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
    }